fc-dioxus 0.1.1

Typed, accessible Dioxus components over future-css
Documentation 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121

/*!
 * future-css -- https://github.com/estith/future-css
 * A styling system for multi-language, multi-platform systems
 *
 * Regenerate with: npm run build
 * This file is generated; edit the sources in src/ instead.
 */
/*!
 * future-css -- split button
 *
 * A default action joined to a menu of alternatives: Send / Send later, Merge /
 * Squash and merge. Two real buttons, because they are two actions with two
 * accessible names; one button with a hot zone would give a screen reader one
 * name for both.
 *
 *   <div class="fc-split-btn" role="group" aria-label="Send">
 *     <button class="fc-btn fc-btn--primary fc-split-btn__action" type="button">Send</button>
 *     <button class="fc-btn fc-btn--primary fc-btn--icon fc-split-btn__toggle" type="button"
 *             aria-haspopup="menu" aria-expanded="false" aria-controls="send-menu"
 *             aria-label="More send options">
 *       <span class="fc-split-btn__chevron" aria-hidden="true"></span>
 *     </button>
 *   </div>
 *   <div class="fc-menu" id="send-menu" role="menu" popover>…</div>
 *
 * Colour, size and every interaction state come from `.fc-btn` and its
 * variants; this file only joins the pair. The menu is `fc-menu` with its
 * binding, which owns `aria-expanded` and focus. Load this file after
 * `button.css` (the bundle does), since the joined corners override the
 * button's own radius at equal specificity.
 */

@layer fc.components {
  .fc-split-btn {
    display: inline-flex;
    align-items: stretch;
    /* Adjoining borders form the separator without an extra painted gap. */
    gap: 0;
    --fc-btn-press-scale: 1;
    max-inline-size: 100%;
  }

  /* Logical corner longhands, so the seam stays between the two in RTL. */
  .fc-split-btn__action {
    border-start-start-radius: min(var(--fc-btn-radius, var(--fc-radius-lg)), var(--fc-btn-corner-limit, calc(var(--fc-size-target-comfortable) / 2)));
    border-end-start-radius: min(var(--fc-btn-radius, var(--fc-radius-lg)), var(--fc-btn-corner-limit, calc(var(--fc-size-target-comfortable) / 2)));
    border-start-end-radius: var(--fc-joined-inner-radius, 0);
    border-end-end-radius: var(--fc-joined-inner-radius, 0);
    min-inline-size: 0;
    /* fc-btn never wraps; a shrunk action would paint its label over the
       toggle, so a long or translated label wraps inside it instead. */
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .fc-split-btn__toggle {
    border-start-end-radius: min(var(--fc-btn-radius, var(--fc-radius-lg)), var(--fc-btn-corner-limit, calc(var(--fc-size-target-comfortable) / 2)));
    border-end-end-radius: min(var(--fc-btn-radius, var(--fc-radius-lg)), var(--fc-btn-corner-limit, calc(var(--fc-size-target-comfortable) / 2)));
    border-start-start-radius: var(--fc-joined-inner-radius, 0);
    border-end-start-radius: var(--fc-joined-inner-radius, 0);
  }

  /*
   * The toggle's open state is its `aria-expanded`, the attribute the menu
   * binding already maintains, so the drawn and announced states agree. Open,
   * the chevron flips while the joined edge retains its shape.
   */
  .fc-split-btn__toggle[aria-expanded="true"] {
    --fc-split-btn-chevron: 225deg;
  }

  /* Overlapping one border removes doubled seams without clipping focus rings. */
  .fc-split-btn__action:not(:first-child) {
    margin-inline-start: calc(-1 * var(--fc-border-width-control, var(--fc-border-width-thin)));
  }
  .fc-split-btn__action:focus-visible {
    position: relative;
    z-index: var(--fc-z-raised);
  }
  .fc-split-btn__toggle:not(:first-child) {
    margin-inline-start: calc(-1 * var(--fc-border-width-control, var(--fc-border-width-thin)));
  }
  .fc-split-btn__toggle:focus-visible {
    position: relative;
    z-index: var(--fc-z-raised);
  }

  .fc-split-btn__chevron {
    inline-size: 0.5em;
    block-size: 0.5em;
    border-block-end: var(--fc-border-width-thick) solid currentColor;
    border-inline-end: var(--fc-border-width-thick) solid currentColor;
    rotate: var(--fc-split-btn-chevron, 45deg);
    translate: 0 -0.15em;
    transition: rotate var(--fc-duration-fast) var(--fc-easing-standard);
  }

  /* The chevron points down in both directions; see `.fc-segmented__check`. */
  .fc-split-btn__chevron:dir(rtl) {
    border-inline-end: 0;
    border-inline-start: var(--fc-border-width-thick) solid currentColor;
  }

  /*
   * Reduced motion: the chevron flips without turning. The reset zeroes the
   * duration; stated here because the flip is the open-state cue.
   */
  @media (prefers-reduced-motion: reduce) {
    .fc-split-btn__chevron {
      transition: none;
    }
  }

  /* Forced colors: each half is a `.fc-btn`, whose forced-colors block draws
     its border; the shared border remains visible. */
  @media (forced-colors: active) {
    .fc-split-btn__toggle[aria-expanded="true"] {
      border-color: Highlight;
    }
  }
}