carbon-components-svelte 0.97.0 → 0.98.1

package/css/_contained-list.scss

@@ -0,0 +1,311 @@
+// 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.
+
+//
+// Copyright IBM Corp. 2022, 2024
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@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';
+
+/// Contained List styles
+/// @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;
+    display: flex;
+    align-items: center;
+    top: 0;
+    padding-left: $spacing-05;
+    padding-right: $spacing-05;
+  }
+
+  .#{$prefix}--contained-list__label {
+    width: 100%;
+  }
+
+  // Search within contained list
+  .#{$prefix}--contained-list .#{$prefix}--search {
+    position: sticky;
+    z-index: 1;
+
+    &.#{$prefix}--search--expandable .#{$prefix}--search-input {
+      background-color: $field-01;
+    }
+  }
+
+  // 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
+  }
+
+  .#{$prefix}--contained-list--on-page.#{$prefix}--contained-list--sm
+    .#{$prefix}--search {
+    top: 2rem; // sm size header height
+  }
+
+  .#{$prefix}--contained-list--on-page.#{$prefix}--contained-list--lg
+    .#{$prefix}--search {
+    top: 4rem; // lg size header height
+  }
+
+  .#{$prefix}--contained-list--on-page.#{$prefix}--contained-list--xl
+    .#{$prefix}--search {
+    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;
+  }
+
+  .#{$prefix}--contained-list
+    .#{$prefix}--search
+    .#{$prefix}--search-close::before {
+    display: none;
+  }
+
+  .#{$prefix}--contained-list .#{$prefix}--search .#{$prefix}--search-close {
+    border-right: 2px solid transparent;
+    outline: none;
+
+    &:focus {
+      @include focus-outline('outline');
+    }
+  }
+
+  .#{$prefix}--contained-list
+    .#{$prefix}--search
+    .#{$prefix}--search-input
+    ~ .#{$prefix}--search-close:hover {
+    border-bottom: 1px solid transparent;
+  }
+
+  .#{$prefix}--contained-list
+    .#{$prefix}--search
+    .#{$prefix}--search-input:focus
+    ~ .#{$prefix}--search-close:hover {
+    border: 2px solid $focus;
+    border-left: 0;
+    outline: none;
+  }
+
+  // "On Page" variant
+  .#{$prefix}--contained-list--on-page + .#{$prefix}--contained-list--on-page {
+    margin-top: $spacing-05;
+  }
+
+  .#{$prefix}--contained-list--on-page .#{$prefix}--contained-list__header {
+    @include type-style('heading-01');
+
+    background-color: $ui-background;
+    height: 3rem;
+    border-bottom: 1px solid $ui-03;
+    color: $text-01;
+  }
+
+  // Size variants for on-page header
+  .#{$prefix}--contained-list--on-page.#{$prefix}--contained-list--sm
+    .#{$prefix}--contained-list__header {
+    height: 2rem;
+  }
+
+  .#{$prefix}--contained-list--on-page.#{$prefix}--contained-list--lg
+    .#{$prefix}--contained-list__header {
+    height: 4rem;
+  }
+
+  .#{$prefix}--contained-list--on-page.#{$prefix}--contained-list--xl
+    .#{$prefix}--contained-list__header {
+    height: 4.5rem;
+  }
+
+  // "Disclosed" variant
+  .#{$prefix}--contained-list--disclosed .#{$prefix}--contained-list__header {
+    @include type-style('label-01');
+
+    background-color: $ui-01;
+    height: 2rem;
+    color: $text-02;
+  }
+
+  // List item
+  .#{$prefix}--contained-list-item {
+    position: relative;
+    display: list-item;
+    list-style: none;
+  }
+
+  .#{$prefix}--contained-list-item:not(:first-of-type) {
+    margin-top: -1px;
+  }
+
+  .#{$prefix}--contained-list-item__content {
+    box-sizing: border-box;
+  }
+
+  .#{$prefix}--contained-list-item--clickable
+    .#{$prefix}--contained-list-item__content {
+    @include button-reset;
+
+    text-align: left;
+    transition: background-color 150ms;
+  }
+
+  .#{$prefix}--contained-list-item__content,
+  .#{$prefix}--contained-list-item--clickable
+    .#{$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
+    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
+    .#{$prefix}--contained-list-item--clickable
+    .#{$prefix}--contained-list-item__content {
+    min-height: 2rem; // 32px
+    padding-top: 0.375rem; // (32px - 20px) / 2 = 6px
+    padding-bottom: 0.375rem;
+  }
+
+  .#{$prefix}--contained-list--lg
+    .#{$prefix}--contained-list-item__content,
+  .#{$prefix}--contained-list--lg
+    .#{$prefix}--contained-list-item--clickable
+    .#{$prefix}--contained-list-item__content {
+    min-height: 4rem; // 64px
+    padding-top: 1.375rem; // (64px - 20px) / 2 = 22px
+    padding-bottom: 1.375rem;
+  }
+
+  .#{$prefix}--contained-list--xl
+    .#{$prefix}--contained-list-item__content,
+  .#{$prefix}--contained-list--xl
+    .#{$prefix}--contained-list-item--clickable
+    .#{$prefix}--contained-list-item__content {
+    min-height: 4.5rem; // 72px
+    padding-top: 1.625rem; // (72px - 20px) / 2 = 26px
+    padding-bottom: 1.625rem;
+  }
+
+  .#{$prefix}--contained-list-item:not(:last-of-type)::before {
+    position: absolute;
+    background-color: $ui-03;
+    height: 1px;
+    content: '';
+    bottom: 0;
+    left: 0;
+    right: 0;
+  }
+
+  .#{$prefix}--contained-list--inset-rulers
+    .#{$prefix}--contained-list-item:not(:last-of-type)::before {
+    left: $spacing-05;
+    right: $spacing-05;
+  }
+
+  .#{$prefix}--contained-list-item--clickable
+    .#{$prefix}--contained-list-item__content:not(:disabled):hover {
+    background-color: $hover-ui;
+  }
+
+  .#{$prefix}--contained-list-item--clickable
+    .#{$prefix}--contained-list-item__content:not(:disabled):active {
+    background-color: $active-ui;
+  }
+
+  .#{$prefix}--contained-list-item--clickable
+    .#{$prefix}--contained-list-item__content:disabled {
+    color: $disabled-02;
+    cursor: not-allowed;
+  }
+
+  .#{$prefix}--contained-list-item--clickable
+    .#{$prefix}--contained-list-item__content:focus {
+    outline: none;
+  }
+
+  .#{$prefix}--contained-list-item--clickable
+    .#{$prefix}--contained-list-item__content:focus::after {
+    @include focus-outline('outline');
+
+    position: absolute;
+    content: '';
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+  }
+
+  .#{$prefix}--contained-list-item--with-action
+    .#{$prefix}--contained-list-item__content {
+    padding-right: $spacing-10;
+  }
+
+  .#{$prefix}--contained-list__action,
+  .#{$prefix}--contained-list-item__action {
+    position: absolute;
+    display: flex;
+    justify-content: flex-end;
+    top: 0;
+    left: 0;
+    right: 0;
+    pointer-events: none;
+  }
+
+  .#{$prefix}--contained-list__action > *,
+  .#{$prefix}--contained-list-item__action > * {
+    pointer-events: all;
+  }
+
+  .#{$prefix}--contained-list-item--with-icon
+    .#{$prefix}--contained-list-item__content {
+    display: grid;
+    column-gap: $spacing-04;
+    grid-template-columns: 1rem 1fr;
+  }
+
+  .#{$prefix}--contained-list-item__icon {
+    display: inline-flex;
+    padding-top: $spacing-01;
+  }
+}
+
+@include exports('contained-list') {
+  @include contained-list;
+}
+

package/css/_slider.scss

@@ -17,6 +17,41 @@
 /// @access private
 /// @group slider
 @mixin slider-validation {
+  //----------------------------------------------
+  // Input wrapper and icons
+  // ---------------------------------------------
+  .#{$prefix}--slider-text-input-wrapper {
+    position: relative;
+    display: inline-block;
+  }
+
+  .#{$prefix}--slider-text-input-wrapper
+    .#{$prefix}--slider-text-input.#{$prefix}--text-input--invalid,
+  .#{$prefix}--slider-text-input-wrapper
+    .#{$prefix}--slider-text-input--warn {
+    width: 6rem;
+    padding-right: 3rem;
+    text-align: left;
+  }
+
+  .#{$prefix}--slider__invalid-icon {
+    position: absolute;
+    fill: $support-error;
+    // top/transform used to center invalid icon in IE11
+    top: 50%;
+    right: $spacing-05;
+    transform: translateY(-50%);
+  }
+
+  .#{$prefix}--slider__invalid-icon.#{$prefix}--slider__invalid-icon--warning {
+    fill: $support-warning;
+  }
+
+  .#{$prefix}--slider__invalid-icon--warning path[data-icon-path="inner-path"] {
+    fill: $inverse-01;
+    opacity: 1;
+  }
+
   //----------------------------------------------
   // Validation message
   // ---------------------------------------------