carbon-components-svelte 0.108.0 → 0.109.0

package/README.md

@@ -10,7 +10,7 @@ Carbon Components Svelte is a [Svelte](https://github.com/sveltejs/svelte) compo
 
 Design systems facilitate design and development through reuse, consistency, and extensibility.
 
-The Carbon Svelte portfolio also includes:
+The Carbon Svelte ecosystem also includes:
 
 - **[Carbon Icons Svelte](https://github.com/carbon-design-system/carbon-icons-svelte)**: 2,600+ Carbon icons as Svelte components
 - **[Carbon Pictograms Svelte](https://github.com/carbon-design-system/carbon-pictograms-svelte)**: 1,500+ Carbon pictograms as Svelte components

package/css/_badge-indicator.scss

@@ -0,0 +1,48 @@
+@import "carbon-components/scss/globals/scss/vars";
+@import "carbon-components/scss/globals/scss/vendor/@carbon/elements/scss/import-once/import-once";
+@import "carbon-components/scss/globals/scss/typography";
+
+/// Badge indicator (Carbon React BadgeIndicator; absent from v10).
+/// An empty dot or a numbered count overlaid on a positioned ancestor.
+/// @access private
+/// @group components
+@mixin badge-indicator {
+  .#{$prefix}--badge-indicator {
+    @include type-style("helper-text-01");
+
+    position: absolute;
+    display: flex;
+    padding: 0 $carbon--spacing-02 $carbon--spacing-01;
+    border-radius: 100px;
+    background: $support-error;
+    color: $text-on-color;
+
+    inset-block-start: 0;
+    inset-inline-end: 0;
+
+    margin-block-start: $carbon--spacing-03;
+    margin-inline-end: $carbon--spacing-03;
+
+    max-block-size: $carbon--spacing-05;
+    min-block-size: $carbon--spacing-03;
+    min-inline-size: $carbon--spacing-03;
+  }
+
+  .#{$prefix}--badge-indicator--count {
+    margin-block-start: $carbon--spacing-02;
+    margin-inline-end: $carbon--spacing-02;
+  }
+
+  .#{$prefix}--btn__badge-wrapper {
+    position: relative;
+    display: inline-flex;
+
+    .#{$prefix}--badge-indicator {
+      pointer-events: none;
+    }
+  }
+}
+
+@include exports("badge-indicator") {
+  @include badge-indicator;
+}

package/css/_box.scss

@@ -0,0 +1,71 @@
+@import "carbon-components/scss/globals/scss/vars";
+@import "carbon-components/scss/globals/scss/vendor/@carbon/elements/scss/import-once/import-once";
+@import "./spacing-scale";
+
+/// Box utility classes for fill, inset, and border tokens.
+/// @access private
+/// @group components
+@mixin box {
+  // Token names follow Carbon v11; values resolve through v10 theme variables.
+  $fill-tokens: (
+    background: $background,
+    layer-01: $ui-01,
+    layer-02: $ui-02,
+    layer-03: $ui-03,
+    field: $field-01,
+    inverse: $background-inverse,
+  );
+
+  @each $name, $value in $fill-tokens {
+    .#{$prefix}--box-fill-#{$name} {
+      background-color: $value;
+    }
+  }
+
+  $border-tokens: (
+    subtle: $border-subtle,
+    strong: $border-strong,
+    interactive: $border-interactive,
+    disabled: $border-disabled,
+  );
+
+  @each $name, $value in $border-tokens {
+    .#{$prefix}--box-border-#{$name} {
+      border: 1px solid $value;
+    }
+  }
+
+  @each $step, $size in $ccs-spacing-scale {
+    .#{$prefix}--box-p-#{$step} {
+      padding: $size;
+    }
+
+    .#{$prefix}--box-px-#{$step} {
+      padding-inline: $size;
+    }
+
+    .#{$prefix}--box-py-#{$step} {
+      padding-block: $size;
+    }
+
+    .#{$prefix}--box-m-#{$step} {
+      margin: $size;
+    }
+
+    .#{$prefix}--box-mx-#{$step} {
+      margin-inline: $size;
+    }
+
+    .#{$prefix}--box-my-#{$step} {
+      margin-block: $size;
+    }
+  }
+
+  .#{$prefix}--box-full-width {
+    width: 100%;
+  }
+}
+
+@include exports("box") {
+  @include box;
+}

package/css/_breadcrumb.scss

@@ -3,7 +3,7 @@
 @import "carbon-components/scss/globals/scss/vendor/@carbon/elements/scss/import-once/import-once";
 @import "carbon-components/scss/globals/scss/typography";
 
-/// Small breadcrumb variant (Carbon React `size="sm"` parity)
+/// Small breadcrumb (Carbon React size="sm")
 /// @access private
 /// @group components
 @mixin breadcrumb-sm {
@@ -35,8 +35,10 @@
     height: $carbon--spacing-05;
     min-height: $carbon--spacing-05;
 
+    // Carbon shifts this icon down 4px inside breadcrumb items. At 1rem trigger
+    // size the icon is already centered, so reset `transform`.
     .#{$prefix}--overflow-menu__icon {
-      transform: translateY(3px);
+      transform: none;
     }
   }
 }
@@ -44,3 +46,18 @@
 @include exports('breadcrumb-sm') {
   @include breadcrumb-sm;
 }
+
+/// Carbon's `--sm`/`--xl` caret sets `width: 40px` on `::after`. Same
+/// specificity as the breadcrumb rule, but Carbon loads first. Force `width: 0`
+/// here so the caret stays a triangle.
+/// @access private
+/// @group components
+@mixin breadcrumb-menu-caret {
+  .#{$prefix}--breadcrumb-menu-options.#{$prefix}--overflow-menu-options[data-floating-menu-direction='bottom']::after {
+    width: 0;
+  }
+}
+
+@include exports('breadcrumb-menu-caret') {
+  @include breadcrumb-menu-caret;
+}

package/css/_checkbox-readonly.scss

@@ -1,7 +1,3 @@
-// This file backports readonly checkbox styles from carbon-components v11+
-// to ensure compatibility with carbon-components v10.58.12.
-// The readonly checkbox feature was added to Carbon Design System in Nov 2022.
-
 @import "carbon-components/scss/globals/scss/vars";
 @import "carbon-components/scss/globals/scss/helper-mixins";
 @import "carbon-components/scss/globals/scss/vendor/@carbon/elements/scss/import-once/import-once";
@@ -10,9 +6,6 @@
 /// @access private
 /// @group checkbox
 @mixin checkbox-readonly {
-  //----------------------------------------------
-  // Read-only
-  // ---------------------------------------------
   .#{$prefix}--checkbox-wrapper--readonly .#{$prefix}--checkbox-label {
     cursor: default;
   }

package/css/_combobox-readonly.scss

@@ -1,6 +1,3 @@
-// This file backports readonly combo-box styles from carbon-components v11+
-// to ensure compatibility with carbon-components v10.58.12.
-
 @import "carbon-components/scss/globals/scss/vars";
 @import "carbon-components/scss/globals/scss/helper-mixins";
 @import "carbon-components/scss/globals/scss/vendor/@carbon/elements/scss/import-once/import-once";
@@ -9,9 +6,6 @@
 /// @access private
 /// @group combobox
 @mixin combobox-readonly {
-  //----------------------------------------------
-  // Read-only
-  // ---------------------------------------------
   .#{$prefix}--list-box.#{$prefix}--combo-box--readonly,
   .#{$prefix}--list-box.#{$prefix}--combo-box--readonly:hover {
     background-color: transparent;

package/css/_contained-list.scss

@@ -1,7 +1,3 @@
-// This file adds contained list styles from carbon-components v11+
-// to ensure compatibility with carbon-components v10.58.12.
-// The ContainedList component provides a structured list with header and items.
-
 @import "carbon-components/scss/globals/scss/vars";
 @import "carbon-components/scss/globals/scss/helper-mixins";
 @import "carbon-components/scss/globals/scss/vendor/@carbon/elements/scss/import-once/import-once";
@@ -10,19 +6,15 @@
 /// @access private
 /// @group contained-list
 @mixin contained-list {
-  // Tag within contained list
   .#{$prefix}--contained-list .#{$prefix}--tag {
-    // Tag size adjustments for contained list context
     height: 1.5rem; // 24px equivalent to md size
   }
 
-  // List container
   .#{$prefix}--contained-list > ul {
     padding: 0;
     margin: 0;
   }
 
-  // Header
   .#{$prefix}--contained-list__header {
     position: sticky;
     z-index: 1;
@@ -37,7 +29,6 @@
     width: 100%;
   }
 
-  // Search within contained list
   .#{$prefix}--contained-list .#{$prefix}--search {
     position: sticky;
     z-index: 1;
@@ -47,12 +38,10 @@
     }
   }
 
-  // Search top offset for disclosed variant (fixed height)
   .#{$prefix}--contained-list--disclosed .#{$prefix}--search {
     top: 2rem; // Fixed header height for disclosed variant
   }
 
-  // Search top offset for on-page variant (size-dependent)
   .#{$prefix}--contained-list--on-page .#{$prefix}--search {
     top: 3rem; // Default md size header height
   }
@@ -72,7 +61,6 @@
     top: 4.5rem; // xl size header height
   }
 
-  // Omit search input background when used inside contained list
   .#{$prefix}--contained-list .#{$prefix}--search .#{$prefix}--search-input {
     background-color: $ui-background;
     border-bottom: 1px solid $ui-03;
@@ -109,7 +97,6 @@
     outline: none;
   }
 
-  // "On Page" variant
   .#{$prefix}--contained-list--on-page + .#{$prefix}--contained-list--on-page {
     margin-top: $spacing-05;
   }
@@ -123,7 +110,6 @@
     color: $text-01;
   }
 
-  // Size variants for on-page header
   .#{$prefix}--contained-list--on-page.#{$prefix}--contained-list--sm
     .#{$prefix}--contained-list__header {
     height: 2rem;
@@ -139,7 +125,7 @@
     height: 4.5rem;
   }
 
-  // "Disclosed" variant
+  // Disclosed variant
   .#{$prefix}--contained-list--disclosed .#{$prefix}--contained-list__header {
     @include type-style('label-01');
 
@@ -148,7 +134,6 @@
     color: $text-02;
   }
 
-  // List item
   .#{$prefix}--contained-list-item {
     position: relative;
     display: list-item;
@@ -176,15 +161,12 @@
     .#{$prefix}--contained-list-item__content {
     @include type-style('body-short-01');
 
-    // Calculate padding based on line-height
-    // body-short-01 line-height is typically 1.25rem (20px)
-    // Height is 3rem (48px) for md size, so padding = (48px - 20px) / 2 = 14px
-    padding: 0.875rem $spacing-05; // 14px vertical, 16px horizontal
+    // Vertical padding centers body-short-01 in the row height
+    padding: 0.875rem $spacing-05;
     color: $text-01;
     min-height: 3rem; // md size default
   }
 
-  // Size variants for list items
   .#{$prefix}--contained-list--sm
     .#{$prefix}--contained-list-item__content,
   .#{$prefix}--contained-list--sm

package/css/_content-switcher-low-contrast.scss

@@ -0,0 +1,128 @@
+@import "carbon-components/scss/globals/scss/vars";
+@import "carbon-components/scss/globals/scss/functions";
+@import "carbon-components/scss/globals/scss/typography";
+@import "carbon-components/scss/globals/scss/vendor/@carbon/elements/scss/import-once/import-once";
+
+/// Low contrast content switcher (Carbon React lowContrast).
+/// v10 has no low-contrast tokens. Selected segment becomes an outlined card;
+/// unselected buttons stay transparent. Light themes use a gray container;
+/// dark themes use a transparent container with a raised selected card ($ui-02).
+///
+/// Single-theme builds detect light/dark from background lightness. `all.css`
+/// uses CSS custom properties, so lightness() fails; default to light and
+/// override via `[theme="g80"|"g90"|"g100"]`.
+/// @access private
+/// @group components
+@mixin content-switcher-low-contrast {
+  $custom-props: feature-flag-enabled("enable-css-custom-properties");
+  $is-light-theme: true;
+  @if not $custom-props {
+    $is-light-theme: lightness($ui-background) > 50%;
+  }
+
+  .#{$prefix}--content-switcher--low-contrast {
+    background-color: if($is-light-theme, $ui-03, transparent);
+
+    .#{$prefix}--content-switcher-btn {
+      border-color: $ui-04;
+      color: $text-secondary;
+
+      &::before {
+        background-color: $border-strong;
+      }
+
+      &::after {
+        border-radius: to-rem(4px);
+        background-color: $ui-02;
+        box-shadow: inset 0 0 0 to-rem(1px) $border-inverse;
+      }
+
+      &:hover,
+      &:active {
+        background-color: $hover-selected-ui;
+        color: $text-primary;
+      }
+
+      // `background-color` must be re-asserted so a disabled switch does not
+      // keep the hover fill (the `:hover`/`:disabled` rules are equal
+      // specificity; this resets it).
+      &:disabled {
+        background-color: transparent;
+        color: $text-disabled;
+      }
+
+      // Carbon's first/last disabled rules set `border-color` at equal
+      // specificity and win by source order, so re-assert the disabled border
+      // for every position. v10 `$border-disabled` is lighter than the
+      // container (invisible); `$disabled-02` matches React's v11
+      // `border-disabled` (gray 30).
+      &:disabled,
+      &:disabled:first-child,
+      &:disabled:last-child {
+        border-color: $disabled-02;
+      }
+    }
+
+    .#{$prefix}--content-switcher-btn.#{$prefix}--content-switcher--selected {
+      background-color: transparent;
+      color: $text-primary;
+      font-weight: 600;
+
+      &:focus {
+        box-shadow: none;
+      }
+
+      &:focus::after {
+        box-shadow: inset 0 0 0 to-rem(2px) $focus;
+        clip-path: none;
+      }
+
+      &:disabled {
+        border: to-rem(1px) solid $disabled-02;
+        border-radius: to-rem(4px);
+        color: $text-disabled;
+
+        &::after {
+          box-shadow: none;
+        }
+      }
+    }
+
+    // The active card carries its own outline, so suppress the dividers on both
+    // sides of it (its own and the next sibling's). The resting `&::before` rule
+    // above outranks Carbon's selected resets, so they must be re-asserted here
+    // at higher specificity.
+    .#{$prefix}--content-switcher--selected::before,
+    .#{$prefix}--content-switcher--selected
+      + .#{$prefix}--content-switcher-btn::before {
+      background-color: transparent;
+    }
+
+    // Unselected icon-only switches use $icon-secondary (Carbon React lowContrast).
+    &.#{$prefix}--content-switcher--icon-only
+      .#{$prefix}--content-switcher-btn
+      svg {
+      fill: $icon-secondary;
+    }
+
+    // Selected icon-only switches use $icon-primary on the light card
+    // (overrides the $icon-secondary fill above).
+    &.#{$prefix}--content-switcher--icon-only
+      .#{$prefix}--content-switcher-btn.#{$prefix}--content-switcher--selected
+      svg {
+      fill: $icon-primary;
+    }
+  }
+
+  @if $custom-props {
+    @each $dark-theme in ("g80", "g90", "g100") {
+      [theme="#{$dark-theme}"] .#{$prefix}--content-switcher--low-contrast {
+        background-color: transparent;
+      }
+    }
+  }
+}
+
+@include exports("content-switcher-low-contrast") {
+  @include content-switcher-low-contrast;
+}

package/css/_content-switcher.scss

@@ -0,0 +1,65 @@
+@import "carbon-components/scss/globals/scss/vars";
+@import "carbon-components/scss/globals/scss/helper-mixins";
+@import "carbon-components/scss/globals/scss/vendor/@carbon/elements/scss/import-once/import-once";
+@import "carbon-components/scss/globals/scss/typography";
+
+/// Icon-only content switcher (Carbon React IconSwitch).
+/// v10 has no icon-only variant. Tooltip label renders in a portal (`Switch.svelte`).
+/// @access private
+/// @group components
+@mixin content-switcher-icon-only {
+  // Double class to outrank the equal-specificity base `.#{$prefix}--content-switcher`
+  // rule, since these overrides are emitted before Carbon's base styles.
+  .#{$prefix}--content-switcher.#{$prefix}--content-switcher--icon-only {
+    width: fit-content;
+    justify-content: flex-start;
+  }
+
+  .#{$prefix}--content-switcher--icon-only .#{$prefix}--content-switcher-btn {
+    width: to-rem(40px);
+    justify-content: center;
+    padding: 0;
+  }
+
+  .#{$prefix}--content-switcher--icon-only.#{$prefix}--content-switcher--sm
+    .#{$prefix}--content-switcher-btn {
+    width: to-rem(32px);
+  }
+
+  .#{$prefix}--content-switcher--icon-only.#{$prefix}--content-switcher--xl
+    .#{$prefix}--content-switcher-btn {
+    width: to-rem(48px);
+  }
+
+  .#{$prefix}--content-switcher--icon-only .#{$prefix}--content-switcher-btn svg {
+    // The svg is a flex item, so z-index lifts it above the button's
+    // `::after` selected-state fill overlay without needing `position`.
+    z-index: 1;
+    fill: $icon-primary;
+    transition: fill $duration--fast-01 motion(standard, productive);
+  }
+
+  // xl: 20px icon (Carbon React lg); sm/default stay 16px.
+  .#{$prefix}--content-switcher--icon-only.#{$prefix}--content-switcher--xl
+    .#{$prefix}--content-switcher-btn
+    svg {
+    block-size: to-rem(20px);
+    inline-size: to-rem(20px);
+  }
+
+  .#{$prefix}--content-switcher--icon-only
+    .#{$prefix}--content-switcher-btn.#{$prefix}--content-switcher--selected
+    svg {
+    fill: $icon-inverse;
+  }
+
+  .#{$prefix}--content-switcher--icon-only
+    .#{$prefix}--content-switcher-btn:disabled
+    svg {
+    fill: $icon-disabled;
+  }
+}
+
+@include exports('content-switcher-icon-only') {
+  @include content-switcher-icon-only;
+}

package/css/_copy-button-portal.scss

@@ -10,6 +10,15 @@
   .#{$prefix}--copy-btn.#{$prefix}--copy-btn--portal-active.#{$prefix}--copy-btn--animating::before,
   .#{$prefix}--copy-btn.#{$prefix}--copy-btn--portal-active .#{$prefix}--copy-btn__feedback,
   .#{$prefix}--copy-btn.#{$prefix}--copy-btn--portal-active.#{$prefix}--copy-btn--animating
+    .#{$prefix}--copy-btn__feedback,
+  // The inline code snippet variant renders its own button without the
+  // `bx--copy-btn` class, so the rules above do not reach it. Carbon's
+  // `.bx--snippet--inline.bx--copy-btn--animating::before` still shows the
+  // native caret beside the portalled tooltip.
+  .#{$prefix}--snippet--inline.#{$prefix}--copy-btn--portal-active.#{$prefix}--copy-btn--animating::before,
+  .#{$prefix}--snippet--inline.#{$prefix}--copy-btn--portal-active
+    .#{$prefix}--copy-btn__feedback,
+  .#{$prefix}--snippet--inline.#{$prefix}--copy-btn--portal-active.#{$prefix}--copy-btn--animating
     .#{$prefix}--copy-btn__feedback {
     display: none;
   }

package/css/_copy-input.scss

@@ -0,0 +1,120 @@
+@import "carbon-components/scss/globals/scss/vars";
+@import "carbon-components/scss/globals/scss/helper-mixins";
+@import "carbon-components/scss/globals/scss/vendor/@carbon/elements/scss/import-once/import-once";
+
+@mixin copy-input {
+  // Reserve room so the value never sits under the copy button.
+  .#{$prefix}--copy-input__field-wrapper .#{$prefix}--text-input {
+    padding-right: 2.5rem;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .#{$prefix}--copy-input__field-wrapper .#{$prefix}--text-input--sm {
+    padding-right: 2rem;
+  }
+
+  .#{$prefix}--copy-input__field-wrapper .#{$prefix}--text-input--xl {
+    padding-right: 3rem;
+  }
+
+  // Fluid form shorthand padding must not collapse right padding below button width.
+  .#{$prefix}--form--fluid,
+  .#{$prefix}--text-input--fluid {
+    .#{$prefix}--copy-input__field-wrapper .#{$prefix}--text-input {
+      padding-right: $carbon--spacing-08;
+    }
+
+    .#{$prefix}--copy-input__field-wrapper .#{$prefix}--text-input--sm {
+      padding-right: $carbon--spacing-07;
+    }
+
+    .#{$prefix}--copy-input__field-wrapper .#{$prefix}--text-input--xl {
+      padding-right: $carbon--spacing-09;
+    }
+  }
+
+  // Transparent overlay pinned to the right edge of the field.
+  .#{$prefix}--copy-input__field-wrapper .#{$prefix}--copy-btn {
+    @include focus-outline("reset");
+
+    position: absolute;
+    right: 0;
+    display: flex;
+    width: to-rem(40px);
+    height: 100%;
+    min-height: auto;
+    align-items: center;
+    justify-content: center;
+    margin: 0;
+    padding: 0;
+    border: 0;
+    background: none;
+    cursor: pointer;
+    transition: outline $duration--fast-01 motion(standard, productive);
+
+    &:hover,
+    &:active {
+      background: none;
+    }
+
+    // Show the button's own focus ring when it (not the input) is focused.
+    &:focus {
+      @include focus-outline("outline");
+    }
+
+    .#{$prefix}--snippet__icon {
+      fill: $icon-secondary;
+      transition: fill $duration--fast-01 motion(standard, productive);
+    }
+
+    &:hover .#{$prefix}--snippet__icon,
+    &:focus .#{$prefix}--snippet__icon {
+      fill: $icon-primary;
+    }
+
+    &:disabled {
+      cursor: not-allowed;
+    }
+
+    &:disabled .#{$prefix}--snippet__icon {
+      fill: $icon-disabled;
+    }
+  }
+
+  // Match the copy button width to the input height for each size.
+  .#{$prefix}--copy-input__field-wrapper
+    .#{$prefix}--text-input--sm
+    ~ .#{$prefix}--copy-btn {
+    width: to-rem(32px);
+  }
+
+  .#{$prefix}--copy-input__field-wrapper
+    .#{$prefix}--text-input--xl
+    ~ .#{$prefix}--copy-btn {
+    width: to-rem(48px);
+  }
+
+  // Fluid copy button matches the password visibility toggle in
+  // `_fluid-text-input.scss` (32×32px on the value row).
+  .#{$prefix}--form--fluid,
+  .#{$prefix}--text-input--fluid {
+    .#{$prefix}--copy-input__field-wrapper .#{$prefix}--copy-btn {
+      block-size: to-rem(32px);
+      inline-size: to-rem(32px);
+      width: to-rem(32px);
+      height: to-rem(32px);
+      min-height: to-rem(32px);
+      inset-block-start: to-rem(26px);
+      inset-inline-end: $spacing-03;
+      right: auto;
+      align-items: center;
+      padding: 0;
+    }
+  }
+}
+
+@include exports("copy-input") {
+  @include copy-input;
+}