fc-dioxus 0.1.0

Typed, accessible Dioxus components over future-css
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
122
123
124
125

/*!
 * 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 -- connected button group
 *
 * Material's connected button group: a short row of related buttons drawn as
 * one joined shape, for a few peer actions or a toggle set that should read
 * as one control (text alignment, view density, playback speed).
 *
 *   <div class="fc-button-group" role="group" aria-label="Alignment">
 *     <button class="fc-btn fc-btn--secondary fc-button-group__item" type="button" aria-pressed="true">Start</button>
 *     <button class="fc-btn fc-btn--secondary fc-button-group__item" type="button" aria-pressed="false">Center</button>
 *     <button class="fc-btn fc-btn--secondary fc-button-group__item" type="button" aria-pressed="false">End</button>
 *   </div>
 *
 * Every button keeps its own Tab stop and its own state: this is a visual
 * join, not a composite widget. A set where exactly one value is chosen and
 * submitted with a form is `fc-segmented`, on native radios; a loose cluster
 * of mixed controls is `fc-control-group`, with an optional joined modifier.
 *
 * Dedicated parts keep position-specific corners independent of the general
 * control group and its mixed fields. Load after `button.css` (the bundle
 * does): the corners win at equal specificity by coming later.
 */

@layer fc.components {
  .fc-button-group {
    display: inline-flex;
    align-items: stretch;
    /* Each adjoining border shares one seam. */
    gap: 0;
    --fc-btn-press-scale: 1;
    min-inline-size: 0;
    max-inline-size: 100%;
  }

  /*
   * Inner corners are tight and outer corners round, so the row reads as one
   * continuous shape separated into targets. Logical corner longhands keep the round ends on
   * the outside in RTL.
   */
  .fc-button-group__item {
    flex: 1 1 auto;
    min-inline-size: 0;
    border-radius: var(--fc-joined-inner-radius, 0);
    /* fc-btn never wraps; a long or translated label wraps inside its own
       segment rather than pushing the row past a narrow screen. */
    white-space: normal;
    overflow-wrap: anywhere;

  }

  .fc-button-group__item:first-child {
    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)));
  }

  .fc-button-group__item:last-child {
    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)));
  }

  /*
   * Selection changes the fill and pressed semantics without breaking the seam.
   * aria-pressed carries the state independently of color.
   */
  .fc-button-group__item[aria-pressed="true"] {
    background-color: var(--fc-color-selected-bg);
    color: var(--fc-color-selected-fg);
    border-color: var(--fc-color-accent-border);
  }

  /* The fill above outranks the button's hover fill, so hover on the pressed
     segment needs a cue of its own. */
  @media (hover: hover) {
    .fc-button-group__item[aria-pressed="true"]:hover:not(:disabled, [aria-disabled="true"]) {
      text-decoration: underline;
      text-underline-offset: 0.2em;
    }
  }

  .fc-button-group__item:disabled,
  .fc-button-group__item[aria-disabled="true"] {
    background-color: var(--fc-color-disabled-bg);
    color: var(--fc-color-disabled-fg);
    border-color: var(--fc-color-disabled-border);
    cursor: not-allowed;
  }

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

  /* ---- Forced colors --------------------------------------------------- */

  @media (forced-colors: active) {
    .fc-button-group__item[aria-pressed="true"] {
      background-color: Highlight;
      color: HighlightText;
      border-color: Highlight;
    }

    /* A pressed button can also be disabled; the Highlight fill above must
       not survive behind GrayText. */
    .fc-button-group__item:disabled,
    .fc-button-group__item[aria-disabled="true"] {
      background-color: ButtonFace;
      color: GrayText;
      border-color: GrayText;
    }
  }

  /* Hover, active, focus and loading come from fc-btn. Motion: the
     transitions above, zeroed by the reset under reduced motion. */
}