actual-css 0.12.0 → 0.14.0

package/src/css/components/alert.css

@@ -61,6 +61,16 @@
   font-size: var(--alert-font-size);
 }
 
+/* Density steps the block padding only: the inline padding is the text
+   column's edge and stays stable. Local to the alert, like .card.compact. */
+.alert.compact {
+  --alert-pad-block: var(--space-20);
+}
+
+.alert.spacious {
+  --alert-pad-block: var(--space-40);
+}
+
 .alert > * {
   min-inline-size: 0;
 }
@@ -85,32 +95,45 @@
 }
 
 /* Alerts are soft by default. The recipe writes local defaults rather than
-   --ui-* so an explicit shared treatment always wins without exclusions. */
+   --ui-* so an explicit shared treatment always wins without exclusions. The
+   fill is the translucent soft tint (see badge.css), with no rim unless a
+   theme sets --soft-border-mix. */
 @supports (color: color-mix(in oklch, red, white)) {
   .alert {
-    /* @sync soft-recipe */
+    /* @sync soft-tint */
     --alert-default-bg: color-mix(
       in oklab,
-      var(--surface) var(--soft-bg-mix),
-      var(--intent, var(--neutral))
+      var(--intent, var(--neutral)) calc(100% - var(--soft-bg-mix)),
+      transparent
     );
     --alert-default-border: color-mix(
       in oklab,
-      var(--surface) var(--soft-border-mix),
-      var(--intent, var(--neutral))
+      var(--intent, var(--neutral)) calc(100% - var(--soft-border-mix, 100%)),
+      transparent
     );
+    /* @sync soft-tint */
+    /* @sync soft-ink */
     --alert-default-fg: var(
       --intent-soft-fg,
       color-mix(in oklab, var(--text), var(--intent, var(--text)) var(--soft-fg-mix))
     );
-    /* @sync soft-recipe */
+    /* @sync soft-ink */
   }
 }
 
-/* Decorative leading icon — use .alert-icon on the icon element. */
+/* Soft is the alert's own default: an explicit .soft must not swap the tint
+   for the shared opaque .soft recipe, so it defers to the default. */
+.alert.soft {
+  --ui-bg: initial;
+  --ui-fg: initial;
+  --ui-border: initial;
+}
+
+/* Decorative leading icon — use .alert-icon on the icon element. display and
+   vertical-align are the no-:has() layout (Degraded tier: the icon sits inline
+   before the text); the grid anatomy below replaces them. */
 .alert > .alert-icon {
   display: inline-block;
-  flex: none;
   inline-size: var(--alert-icon-size);
   block-size: var(--alert-icon-size);
   font-size: var(--alert-icon-size);
@@ -142,45 +165,44 @@
 
 /* Grid anatomy — activated by a leading icon, a trailing dismiss button, or
    both. Icon and dismiss are pinned to the outer columns; anything else (the
-   message content) flows into the remaining text column. */
-@supports selector(.alert:has(> *)) {
-  .alert:has(> .alert-icon, > .close) {
-    display: grid;
-    grid-template-columns: minmax(0, 1fr);
-    align-items: var(--items-align, start);
-    column-gap: var(--space-30);
-  }
-
-  .alert:has(> .alert-icon) {
-    grid-template-columns: auto minmax(0, 1fr);
-  }
+   message content) flows into the remaining text column. Without :has(), the
+   grid rules drop together and the alert keeps ordinary block flow. */
+.alert:has(> .alert-icon, > .close) {
+  display: grid;
+  /* No grid-template-columns: the icon and close branches below always set
+     it, since one of them is what matched. */
+  align-items: var(--items-align, start);
+  column-gap: var(--space-30);
+}
 
-  .alert:has(> .alert-icon) > .alert-icon {
-    grid-column: 1;
-    grid-row: 1 / -1;
-    display: inline-grid;
-    place-items: center;
-    margin-block-start: 0.125em;
-  }
+.alert:has(> .alert-icon) {
+  grid-template-columns: auto minmax(0, 1fr);
+}
 
-  .alert:has(> .alert-icon) > :not(.alert-icon, .close) {
-    grid-column: 2;
-  }
+.alert:has(> .alert-icon) > .alert-icon {
+  grid-column: 1;
+  grid-row: 1 / -1;
+  display: inline-grid;
+  place-items: center;
+  margin-block-start: 0.125em;
+}
 
-  .alert:has(> .close) {
-    grid-template-columns: minmax(0, 1fr) auto;
-  }
+.alert:has(> .alert-icon) > :not(.alert-icon, .close) {
+  grid-column: 2;
+}
 
-  .alert:has(> .alert-icon):has(> .close) {
-    grid-template-columns: auto minmax(0, 1fr) auto;
-  }
+.alert:has(> .close) {
+  grid-template-columns: minmax(0, 1fr) auto;
+}
 
-  .alert:has(> .close) > .close {
-    grid-column: -2 / -1;
-    grid-row: 1;
-  }
+.alert:has(> .alert-icon):has(> .close) {
+  grid-template-columns: auto minmax(0, 1fr) auto;
 }
 
+.alert:has(> .close) > .close {
+  grid-column: -2 / -1;
+  grid-row: 1;
+}
 /* Links */
 .alert :where(a:not(.btn)) {
   color: inherit;
@@ -205,7 +227,10 @@
 
 /* Admonition — structured static box with a tinted title bar and a body
    that rests on the page surface. Not collapsible — use .accordion inside
-   the body if the content needs to be expandable. */
+   the body if the content needs to be expandable. The title bar is what a
+   shared treatment paints (.solid fills it, .surface/.outline clear it): the
+   root's fill never shows behind the opaque title and body, and the title ink
+   already follows --ui-fg, so a bar left on the soft tint is unreadable. */
 .alert.admonition {
   padding: 0;
   display: block;
@@ -219,6 +244,7 @@
   gap: var(--space-20);
   padding-block: var(--alert-pad-block);
   padding-inline: var(--alert-pad-inline);
+  font-weight: var(--font-weight-semibold);
   border-start-start-radius: calc(var(--alert-radius, var(--radius-lg)) - var(--border-width));
   border-start-end-radius: calc(var(--alert-radius, var(--radius-lg)) - var(--border-width));
 }
@@ -230,18 +256,17 @@
 
 @supports (color: color-mix(in oklch, red, white)) {
   .alert.admonition > .alert-title {
-    background: color-mix(
-      in oklab,
-      var(--surface) var(--soft-bg-mix),
-      var(--intent, var(--neutral))
+    background: var(
+      --ui-bg,
+      color-mix(in oklab, var(--surface) var(--soft-bg-mix), var(--intent, var(--neutral)))
     );
   }
 }
 
 @supports not (color: color-mix(in oklch, red, white)) {
   .alert.admonition > .alert-title {
-    background: var(--intent, var(--neutral));
-    color: var(--intent-fg, var(--neutral-fg));
+    background: var(--ui-bg, var(--intent, var(--neutral)));
+    color: var(--ui-fg, var(--intent-fg, var(--neutral-fg)));
   }
 }
 
@@ -252,6 +277,32 @@
   color: var(--text);
 }
 
+/* Solid: the filled title bar already carries the intent, so the frame moves
+   to the body and stays neutral. The root border goes because a transparent
+   one would show the root's intent fill around the body. */
+.alert.admonition.solid {
+  border: 0;
+}
+
+.alert.admonition.solid > .alert-body {
+  border: var(--border-width) solid var(--border);
+  border-block-start: 0;
+  border-end-start-radius: var(--alert-radius, var(--radius-lg));
+  border-end-end-radius: var(--alert-radius, var(--radius-lg));
+}
+
+/* Forced colors drop the title fill, so the bar would lose its edge: the
+   frame returns to the root as one uniform system-colored border. */
+@media (forced-colors: active) {
+  .alert.admonition.solid {
+    border: var(--border-width) solid CanvasText;
+  }
+
+  .alert.admonition.solid > .alert-body {
+    border: 0;
+  }
+}
+
 .alert.admonition > .alert-body > :first-child {
   margin-block-start: 0;
 }

package/src/css/components/app-nav.css

@@ -40,6 +40,7 @@
 }
 
 .app-nav > a {
+  position: relative;
   display: grid;
   grid-template-rows: auto auto;
   place-content: center;
@@ -80,18 +81,25 @@
 }
 
 /* Current tile is already a full selected surface. Selection never changes
-   text metrics: the shared medium weight is kept, no permanent indicator is
-   added here. */
+   text metrics: the shared medium weight is kept. The forced-colors cue is a
+   transparent border on a ::before overlay, not on the tile: an element border
+   shrinks the content box, and the side layout starts its content at the inline
+   edge, so the icon and label shifted by --border-width when a tile became
+   current. The overlay costs no layout, yet forced colors still turn its
+   transparent border into a system-color frame once --state-selected flattens
+   to the bar's own Canvas. No forced-colors repaint: a Highlight fill put
+   HighlightText on Chromium's Canvas backplate, which hid the label. The
+   positioning context is on every link so it does not move when one becomes
+   current or an application places its own decoration. */
 .app-nav > a[aria-current="page"] {
   background: var(--state-selected);
   color: var(--state-selected-fg);
 }
 
-@media (forced-colors: active) {
-  /* --state-selected flattens to a UA color that no longer distinguishes the
-     current tile from the rest of the bar, so paint the system Highlight pair. */
-  .app-nav > a[aria-current="page"] {
-    background: Highlight;
-    color: HighlightText;
-  }
+.app-nav > a[aria-current="page"]::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border: var(--border-width) solid transparent;
+  border-radius: inherit;
 }

package/src/css/components/avatar.css

@@ -11,13 +11,13 @@
  * --avatar-size
  * --avatar-radius
  * --avatar-font-size
+ * --avatar-bg
  * --avatar-stack-size
  * --avatar-stack-font-size
  * --avatar-stack-overlap
  * --avatar-stack-ring
  *
  * Internal:
- * --avatar-bg
  * --avatar-fg
  * --avatar-status-translate-x
  */
@@ -95,16 +95,13 @@
 
 .avatar > img,
 .avatar > picture > img {
+  display: block;
   inline-size: 100%;
   block-size: 100%;
   object-fit: cover;
   border-radius: inherit;
 }
 
-.avatar > picture > img {
-  display: block;
-}
-
 button.avatar {
   appearance: none;
   cursor: pointer;
@@ -198,19 +195,6 @@ a.avatar[aria-disabled="true"] {
   --avatar-stack-font-size: var(--font-size-lg);
 }
 
-/* Infer the stack scale from its avatars. Progressive: without :has() the
-   explicit .avatar-stack.sm/.lg classes and the default size still size the
-   group, only the inference is lost. */
-.avatar-stack:has(> .avatar.sm) {
-  --avatar-stack-size: 1.75rem;
-  --avatar-stack-font-size: var(--font-size-xs);
-}
-
-.avatar-stack:has(> .avatar.lg) {
-  --avatar-stack-size: 3rem;
-  --avatar-stack-font-size: var(--font-size-lg);
-}
-
 /* Overlapping avatars hide their neighbour: a translucent fill (--surface-subtle
    on a glass palette) would show the next avatar's edge through it, most of all
    when hover raises one above the other. The fill is layered over the opaque

package/src/css/components/badge.css

@@ -111,33 +111,46 @@
 }
 
 /* Soft by default. Local defaults remain behind --ui-* in the resolution
-   chain, so explicit shared treatments compose without selector exclusions. */
+   chain, so explicit shared treatments compose without selector exclusions.
+   The fill is a translucent intent tint, so it shows the surface it sits on
+   instead of a fixed mix with --surface: a mix stops separating on a subtle
+   or raised surface of its own lightness. No rim unless a theme sets
+   --soft-border-mix (tokens.css). */
 @supports (color: color-mix(in oklch, red, white)) {
   .badge {
-    /* @sync soft-recipe */
+    /* @sync soft-tint */
     --badge-default-bg: color-mix(
       in oklab,
-      var(--surface) var(--soft-bg-mix),
-      var(--intent, var(--neutral))
+      var(--intent, var(--neutral)) calc(100% - var(--soft-bg-mix)),
+      transparent
     );
     --badge-default-border: color-mix(
       in oklab,
-      var(--surface) var(--soft-border-mix),
-      var(--intent, var(--neutral))
+      var(--intent, var(--neutral)) calc(100% - var(--soft-border-mix, 100%)),
+      transparent
     );
+    /* @sync soft-tint */
+    /* @sync soft-ink */
     --badge-default-fg: var(
       --intent-soft-fg,
       color-mix(in oklab, var(--text), var(--intent, var(--text)) var(--soft-fg-mix))
     );
-    /* @sync soft-recipe */
+    /* @sync soft-ink */
   }
 }
 
+/* Soft is the badge's own default: an explicit .soft must not swap the tint
+   for the shared opaque .soft recipe, so it defers to the default. */
+.badge.soft {
+  --ui-bg: initial;
+  --ui-fg: initial;
+  --ui-border: initial;
+}
+
 .badge:empty {
   --badge-size: var(--badge-dot-size);
   --badge-bg: var(--intent, var(--neutral));
   --badge-fg: var(--intent-fg, var(--neutral-fg));
-  --badge-border: transparent;
   padding: 0;
   border: 0;
   inline-size: var(--badge-size);
@@ -172,8 +185,8 @@
   :is(a.badge, button.badge):where(:not(.solid, .outline, :empty)) {
     --badge-default-hover-bg: color-mix(
       in oklab,
-      var(--surface) calc(var(--soft-bg-mix) - var(--soft-hover-alpha)),
-      var(--intent, var(--neutral))
+      var(--intent, var(--neutral)) calc(100% - var(--soft-bg-mix) + var(--soft-hover-alpha)),
+      transparent
     );
   }
 

package/src/css/components/breadcrumb.css

@@ -4,14 +4,21 @@
  * Docs: docs/pages/components/breadcrumb.md
  *
  * Inline list separated by "/". Mark the current page with `aria-current="page"`
- * either on the item or on the current link.
+ * either on the item or on the current link. Ancestor labels sit in an <a> or a
+ * <span>, the box that truncates.
+ *
+ * Breadcrumbs are a single navigation hierarchy. Wrapping makes hierarchy look
+ * like separate rows and causes unstable header height, and scrolling hides the
+ * root behind a scrollbar. A trail that does not fit truncates instead:
+ * ancestors first, the current page last, each label behind an ellipsis.
  */
+
 .breadcrumb {
   display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
+  flex-wrap: nowrap;
   align-items: center;
   gap: var(--space-10);
+  min-inline-size: 0;
   margin: 0;
   padding: 0;
   color: var(--text-subtle);
@@ -19,15 +26,74 @@
   list-style: none;
 }
 
-.breadcrumb li {
-  display: inline-flex;
+/* The landmark around the trail must shrink with it in a flex or grid row, or
+   it keeps the trail's full width and the labels never get to truncate.
+   Without :has() the landmark keeps its width; min-inline-size: 0 on the
+   wrapper is the fallback. */
+:where(nav:has(> .breadcrumb)) {
+  min-inline-size: 0;
+}
+
+/* Grid, not flex: under a min-content constraint a grid track keeps its base
+   size, which is the label's minimum below, so the item's own minimum is
+   separator + label floor without anyone measuring a "/". A flex item would
+   report the full label as its minimum and never shrink.
+
+   Ancestors take the shrink before the current page, so the location is the
+   last thing to lose characters. The ratio is deliberately huge: at 1000 the
+   current page still took a fraction of a pixel, enough to trigger its
+   ellipsis while ancestors had room. Its own factor stays 1, because flex
+   distributes only a share of the deficit when the unfrozen factors sum below
+   one. Keyed on the last item, the current page by convention, so the order
+   holds without :has(). */
+.breadcrumb > li {
+  display: inline-grid;
+  flex: 0 1000000 auto;
+  grid-auto-flow: column;
   align-items: center;
-  gap: var(--space-10);
+  white-space: nowrap;
 }
 
-.breadcrumb li + li::before {
-  content: "/";
+.breadcrumb > li:last-child {
+  flex-shrink: 1;
+}
+
+/* A margin rather than a grid gap, so the separator keeps its space when the
+   current page below lays it out inline. The weight stays normal there, where
+   it would inherit the current page's. */
+.breadcrumb > li + li::before {
+  margin-inline-end: var(--space-10);
   color: var(--text-subtle);
+  font-weight: var(--font-weight-normal);
+  content: "/";
+}
+
+/* The ellipsis lives on the label, not on the item: an element never clips
+   its own outline, but an overflow-hidden item would clip its link's focus
+   line, which sits outside the link box.
+
+   The floor keeps a truncated label readable as a step ("Po…") instead of
+   collapsing to its separator. calc-size() lets a shorter label keep its own
+   width; without it, the plain 2em floor leaves a label under 2em a little
+   trailing room. */
+.breadcrumb > li > :is(a, span) {
+  min-inline-size: 2em;
+  min-inline-size: calc-size(max-content, min(size, 2em));
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* The current page written as bare text has no label box, so its item
+   truncates itself. Only with no element inside: an aria-current item that
+   holds a link would clip that link's focus line, and keeps the label rule
+   above instead. Its own rule, never merged with the one above: a browser
+   without :has() drops it alone, and bare text then keeps its full width. */
+.breadcrumb > li[aria-current="page"]:not(:has(> *)) {
+  display: block;
+  min-inline-size: 2em;
+  min-inline-size: calc-size(max-content, min(size, 2em));
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .breadcrumb a {

package/src/css/components/button.css

@@ -133,12 +133,27 @@
   --ui-hover-bg: transparent;
 }
 
+/* A soft button takes the badge and alert tint, not the shared opaque .soft:
+   it carries a short label like them, and the translucent fill keeps
+   separating on a subtle or raised surface. Ink stays the shared .soft one. */
 @supports (color: color-mix(in oklch, red, white)) {
   .btn.soft {
+    /* @sync soft-tint */
+    --ui-bg: color-mix(
+      in oklab,
+      var(--intent, var(--neutral)) calc(100% - var(--soft-bg-mix)),
+      transparent
+    );
+    --ui-border: color-mix(
+      in oklab,
+      var(--intent, var(--neutral)) calc(100% - var(--soft-border-mix, 100%)),
+      transparent
+    );
+    /* @sync soft-tint */
     --ui-hover-bg: color-mix(
       in oklab,
-      var(--surface) calc(var(--soft-bg-mix) - var(--soft-hover-alpha)),
-      var(--intent, var(--neutral))
+      var(--intent, var(--neutral)) calc(100% - var(--soft-bg-mix) + var(--soft-hover-alpha)),
+      transparent
     );
   }
 

package/src/css/components/close.css

@@ -93,10 +93,13 @@
 }
 
 @media (forced-colors: active) {
-  /* The X is a currentColor mask fill: without this the system remaps the
-    background to Canvas and the glyph disappears. Kept on the pseudo so the
-    host keeps its native color and focus adaptation. */
+  /* The X is a mask fill: without this the system remaps the background to
+    Canvas and the glyph disappears. Kept on the pseudo so the host keeps its
+    native color and focus adaptation. The fill is the system color, not
+    currentColor: an unadjusted pseudo inherits the authored ink, so a white
+    .solid ink painted a white X on Canvas. */
   .close::before {
     forced-color-adjust: none;
+    background: ButtonText;
   }
 }

package/src/css/components/drawer.css

@@ -25,6 +25,7 @@
  * --drawer-close-reserve (header room for a corner close; zero without a close)
  * --drawer-motion-duration (shared by panel and ::backdrop so exit duration
  *   changes in one place; entry state redefines it longer)
+ * --drawer-motion-ease (panel easing owned by the open/closed state)
  */
 :where(dialog).drawer {
   --drawer-size: 20rem;
@@ -39,6 +40,7 @@
   /* Exit is shorter than entry so the panel clears quickly; the scrim reads
      the same variable through inheritance and never lags the panel. */
   --drawer-motion-duration: var(--duration);
+  --drawer-motion-ease: var(--ease-exit);
 
   /* Keep the surface anchored to the viewport in the top layer. This also
      provides the containing block for the absolutely positioned close button.
@@ -70,21 +72,21 @@
   box-shadow: var(--shadow);
   opacity: 0;
   transform: translateX(var(--drawer-closed-translate));
-  transition:
-    opacity var(--drawer-motion-duration) var(--ease-exit),
-    transform var(--drawer-motion-duration) var(--ease-exit);
+  /* Unsupported discrete behavior drops alone, preserving opacity/transform. */
+  transition-property: opacity, transform, overlay, display;
+  transition-duration: var(--drawer-motion-duration);
+  transition-timing-function: var(--drawer-motion-ease);
+  transition-behavior: allow-discrete;
 }
 
 :where(dialog).drawer[open] {
   --drawer-motion-duration: var(--duration-slow);
+  --drawer-motion-ease: var(--ease-enter);
   display: grid;
   grid-template-rows: auto minmax(0, 1fr) auto;
   gap: var(--space-40);
   opacity: 1;
   transform: translateX(0);
-  transition:
-    opacity var(--drawer-motion-duration) var(--ease-enter),
-    transform var(--drawer-motion-duration) var(--ease-enter);
 }
 
 /* A form is the drawer's content wrapper when actions need method="dialog".
@@ -104,7 +106,10 @@
   opacity: 0;
   /* Scrim curve stays neutral `ease`; only the panel's character curves
      apply. Duration follows --drawer-motion-duration through inheritance. */
-  transition: opacity var(--drawer-motion-duration) ease;
+  transition-property: opacity, overlay, display;
+  transition-duration: var(--drawer-motion-duration);
+  transition-timing-function: ease;
+  transition-behavior: allow-discrete;
 }
 
 :where(dialog).drawer[data-side="end"] {
@@ -138,47 +143,23 @@
    exclusion list is easier to trust than its `position: absolute`. */
 :where(dialog).drawer > :not(:is(header, footer, form, .close)),
 :where(dialog).drawer > form > :not(:is(header, footer, .close)) {
-  --drawer-focus-bleed: calc(
-    var(--focus-outline-offset) +
-    max(var(--focus-ring-width), var(--border-width) * 2)
-  );
+  /* Declared here, not as a :root alias: an inherited alias arrives already
+     computed, so a --focus-ring-width override on the drawer would not reach
+     it. */
+  --drawer-focus-bleed: calc(var(--focus-outline-offset) + var(--focus-ring-width));
 
   min-block-size: 0;
-  /* Keep focus paint inside the clip without moving the body off the fixed
-     header and footer edges. The reserve covers the thicker of the two
-     outside indicators: the :focus baseline (2 × border) and the component
-     line (--focus-ring-width, 3px in bootstrap-v6). */
-  margin-inline: calc(var(--drawer-focus-bleed) * -1);
-  padding-inline: var(--drawer-focus-bleed);
+  /* Keep focus paint inside the clip, on all four sides (overflow: auto clips
+     both axes), without moving the content. Every outside indicator is
+     --focus-ring-width wide (core/focus.css). On the block axis the reserve
+     reaches into the slot gap, which is wider, so the scrollport never slides
+     under the header or footer. */
+  margin: calc(var(--drawer-focus-bleed) * -1);
+  padding: var(--drawer-focus-bleed);
   overflow: auto;
   overscroll-behavior: contain;
 }
 
-@supports (transition-behavior: allow-discrete) {
-  :where(dialog).drawer {
-    transition:
-      opacity var(--drawer-motion-duration) var(--ease-exit),
-      transform var(--drawer-motion-duration) var(--ease-exit),
-      overlay var(--drawer-motion-duration) allow-discrete,
-      display var(--drawer-motion-duration) allow-discrete;
-  }
-
-  :where(dialog).drawer[open] {
-    transition:
-      opacity var(--drawer-motion-duration) var(--ease-enter),
-      transform var(--drawer-motion-duration) var(--ease-enter),
-      overlay var(--drawer-motion-duration) allow-discrete,
-      display var(--drawer-motion-duration) allow-discrete;
-  }
-
-  :where(dialog).drawer::backdrop {
-    transition:
-      opacity var(--drawer-motion-duration) ease,
-      overlay var(--drawer-motion-duration) allow-discrete,
-      display var(--drawer-motion-duration) allow-discrete;
-  }
-}
-
 /* Safari before 16.4 does not support :dir(); keep the ancestor-attribute
    path as the Degraded-tier fallback. The :dir() rules are dropped on their
    own there, so they need no wrapper. :dir() follows inherited HTML

package/src/css/components/flyout.css

@@ -93,7 +93,6 @@
 .flyout[popover] {
   position: fixed;
   inset: auto;
-  margin: 0;
 }
 
 /* A presentation class may own its *visible* display type, but must not

package/src/css/components/index.css

@@ -40,6 +40,7 @@
 @import "./breadcrumb.css";
 @import "./pagination.css";
 @import "./tab.css";
+@import "./segmented.css";
 @import "./scrollspy.css";
 
 /* Data */