carbon-components-svelte 0.110.0 → 0.110.2

package/css/_structured-list-input-focusable.scss

@@ -0,0 +1,75 @@
+@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";
+
+// Carbon's base `.bx--structured-list-input` is `display: none`, which
+// worked when the row's own <label> carried the radio/checkbox role and
+// tabindex. Now that the label is a plain wrapper (role isn't allowed on
+// <label>) and the native input is the focusable, checkbox/radio-shaped
+// control, it must stay in the tab order and accessibility tree -- visually
+// hidden the same way SelectableTile's input is, instead of display: none.
+//
+// The input renders as a sibling of the row's `.bx--structured-list-td`
+// cells (inside the CSS-table `.bx--structured-list-row`). Any non-`none`
+// display value on that raw sibling -- regardless of position -- makes the
+// browser's table auto-layout allocate it an oversized anonymous column,
+// opening a visible gap between cells. Giving the wrapper an explicit
+// `display: table-cell` makes it a real, correctly-sized column instead of
+// an anonymous one. Native radio/checkbox inputs can't take `table-cell`
+// display themselves (browsers force them back to `inline-block`), so the
+// wrapper carries the table-cell display; the clipping that hides the input
+// stays on the input itself, since a table-cell box is stretched to the
+// row's height regardless of its own `height`, which would defeat a 1px
+// clip applied to the wrapper.
+@mixin structured-list-input-focusable {
+  .#{$prefix}--structured-list-input-wrapper {
+    display: table-cell;
+    position: relative;
+    width: 1px;
+    box-sizing: border-box;
+  }
+
+  .#{$prefix}--structured-list-input {
+    display: inline-block;
+    @include hidden;
+  }
+
+  .#{$prefix}--structured-list-row:focus-within {
+    @include focus-outline("outline");
+  }
+
+  // Under `border-collapse: collapse`, every column's top border is
+  // resolved independently against the column above it. Carbon's hover
+  // rule below only adds `border-top` to `.bx--structured-list-td`
+  // cells, so the wrapper's column -- lacking that border -- resolves
+  // to a different edge than its neighbors, showing as a 1px seam right
+  // where the wrapper sits. Giving the wrapper the identical
+  // conditional border keeps every column's top edge resolving the same
+  // way, hover or not.
+  .#{$prefix}--structured-list--selection
+    .#{$prefix}--structured-list-row:hover:not(.#{$prefix}--structured-list-row--header-row)
+    > .#{$prefix}--structured-list-input-wrapper {
+    border-top: 1px solid $ui-01;
+  }
+
+  // Carbon's base CSS fills the selection icon via
+  // `.bx--structured-list-input:checked + .bx--structured-list-td`, an
+  // adjacent-sibling selector that requires the input to be a direct
+  // sibling of the cell. Wrapping the input for the table-layout fix above
+  // breaks that adjacency. `:has()` would restore it, but it's unsupported
+  // at the Svelte 5 browser baseline (Safari 14, Chrome 87 -- see
+  // _datepicker.scss), so instead StructuredListInput mirrors `checked`
+  // onto the wrapper itself, keeping the same adjacent-sibling shape.
+  .#{$prefix}--structured-list-input-wrapper--checked
+    + .#{$prefix}--structured-list-row
+    .#{$prefix}--structured-list-svg,
+  .#{$prefix}--structured-list-input-wrapper--checked
+    + .#{$prefix}--structured-list-td
+    .#{$prefix}--structured-list-svg {
+    fill: $icon-01;
+  }
+}
+
+@include exports("structured-list-input-focusable") {
+  @include structured-list-input-focusable;
+}