carbon-components-svelte 0.102.0 → 0.104.0

package/css/_multiselect.scss

@@ -0,0 +1,33 @@
+// Multi-select "select all" styles for the first item
+// separator border treatment.
+
+@import "carbon-components/scss/globals/scss/vars";
+@import "carbon-components/scss/globals/scss/vendor/@carbon/elements/scss/import-once/import-once";
+
+@mixin multiselect-selectall {
+  // When select all is turned on, the first item in the listbox
+  // is always the "Select all" option and gets special border
+  // treatment
+  .#{$prefix}--multi-select.#{$prefix}--multi-select--selectall
+    .#{$prefix}--list-box__menu-item:first-child
+    .#{$prefix}--list-box__menu-item__option {
+    border-block-end: 1px solid $ui-03;
+    margin-left: 0;
+    padding-left: $carbon--spacing-05;
+    margin-right: 0;
+    padding-right: $carbon--spacing-05;
+  }
+
+  // When select all is turned on, the second item in the list
+  // has special treatment to look correct against the "Select all"
+  // border treatment
+  .#{$prefix}--multi-select.#{$prefix}--multi-select--selectall
+    .#{$prefix}--list-box__menu-item:nth-child(2)
+    .#{$prefix}--list-box__menu-item__option {
+    border-block-start: none;
+  }
+}
+
+@include exports('multiselect-selectall') {
+  @include multiselect-selectall;
+}

package/css/_selectable-tag.scss

@@ -0,0 +1,46 @@
+@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 selectable-tag {
+  .#{$prefix}--tag--selectable {
+    border: 1px solid $border-inverse;
+    background-color: $ui-01;
+    color: $text-01;
+    cursor: pointer;
+
+    &:hover {
+      background-color: $hover-ui;
+      outline: none;
+    }
+
+    &:focus {
+      outline: 2px solid $focus;
+      outline-offset: 1px;
+    }
+  }
+
+  .#{$prefix}--tag--selectable-selected {
+    background-color: $layer-selected-inverse;
+    color: $text-inverse;
+
+    &:hover {
+      background-color: $layer-selected-inverse;
+    }
+  }
+
+  .#{$prefix}--tag--selectable.#{$prefix}--tag--disabled {
+    border: 1px solid $disabled-02;
+    background-color: $ui-01;
+    color: $disabled-02;
+
+    &:hover {
+      background-color: $ui-01;
+      cursor: not-allowed;
+    }
+  }
+}
+
+@include exports('selectable-tag') {
+  @include selectable-tag;
+}

package/css/_tabs.scss

@@ -0,0 +1,161 @@
+//
+// Copyright IBM Corp. 2016, 2018
+//
+// 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";
+
+/// Tab icon styles
+/// @access private
+/// @group components
+@mixin tabs-icon {
+  .#{$prefix}--tabs__nav-link:has(.#{$prefix}--tabs__nav-item--icon) {
+    display: flex;
+    align-items: center;
+  }
+
+  .#{$prefix}--tabs__nav-item--icon {
+    display: flex;
+    align-items: center;
+    padding-inline-start: $carbon--spacing-03;
+  }
+
+  .#{$prefix}--tabs__nav-item--disabled .#{$prefix}--tabs__nav-item--icon svg {
+    fill: $disabled-02;
+  }
+
+  .#{$prefix}--tabs--container
+    .#{$prefix}--tabs__nav-item--disabled
+    .#{$prefix}--tabs__nav-item--icon
+    svg {
+    fill: $text-on-color-disabled;
+  }
+
+  .#{$prefix}--tabs--container
+    .#{$prefix}--tabs__nav-link:has(.#{$prefix}--tabs__nav-item--icon) {
+    inline-size: 100%;
+  }
+
+  .#{$prefix}--tabs--container .#{$prefix}--tabs__nav-item--icon {
+    margin-inline-start: auto;
+    padding-inline-start: $carbon--spacing-05;
+  }
+}
+
+@include exports('tabs-icon') {
+  @include tabs-icon;
+}
+
+/// Tab full-width styles
+/// @access private
+/// @group components
+@mixin tabs-full-width {
+  .#{$prefix}--tabs--full-width .#{$prefix}--tabs__nav {
+    width: 100%;
+  }
+
+  .#{$prefix}--tabs--full-width .#{$prefix}--tabs__nav-item {
+    flex: 1;
+  }
+
+  .#{$prefix}--tabs--full-width .#{$prefix}--tabs__nav-link {
+    width: 100%;
+    max-width: none;
+  }
+}
+
+@include exports('tabs-full-width') {
+  @include tabs-full-width;
+}
+
+/// Tab tall (secondary label) styles
+/// @access private
+/// @group components
+@mixin tabs-tall {
+  @include carbon--breakpoint(md) {
+    .#{$prefix}--tabs--tall.#{$prefix}--tabs--container {
+      min-height: 4rem;
+    }
+
+    .#{$prefix}--tabs--tall .#{$prefix}--tabs__nav-item {
+      min-height: 4rem;
+    }
+
+    .#{$prefix}--tabs--tall.#{$prefix}--tabs--container a.#{$prefix}--tabs__nav-link {
+      display: flex;
+      flex-direction: column;
+      align-items: flex-start;
+      justify-content: center;
+      height: 100%;
+    }
+  }
+
+  .#{$prefix}--tabs__nav-item-label-wrapper {
+    display: flex;
+    line-height: normal;
+  }
+
+  .#{$prefix}--tabs--container .#{$prefix}--tabs__nav-item-secondary-label {
+    @include carbon--type-style("caption-01");
+
+    min-height: 1rem;
+  }
+}
+
+@include exports('tabs-tall') {
+  @include tabs-tall;
+}
+
+/// Tab container panel background
+/// @access private
+/// @group components
+@mixin tabs-container-panel {
+  .#{$prefix}--tabs--container ~ .#{$prefix}--tab-content {
+    background-color: $ui-01;
+  }
+}
+
+@include exports('tabs-container-panel') {
+  @include tabs-container-panel;
+}
+
+/// Container type: remove link border on disabled tab hover
+/// Default tabs add a bottom border to the nav link on disabled hover; container
+/// tabs use a different visual treatment and should not show this border.
+/// @access private
+/// @group components
+@mixin tabs-container-disabled-hover {
+  .#{$prefix}--tabs--container
+    .#{$prefix}--tabs__nav-item--disabled:hover
+    .#{$prefix}--tabs__nav-link {
+    border-bottom: none;
+    border-block-end: none;
+  }
+}
+
+@include exports('tabs-container-disabled-hover') {
+  @include tabs-container-disabled-hover;
+}
+
+/// Container type: do not apply fixed 10rem width to nav links.
+/// Default tabs get width: 10rem at 42rem viewport from base Carbon styles
+/// (including :focus and :active); container tabs should size naturally.
+/// @access private
+/// @group components
+@mixin tabs-container-nav-link-width {
+  @media (min-width: 42rem) {
+    .#{$prefix}--tabs--container .#{$prefix}--tabs__nav-link,
+    .#{$prefix}--tabs--container .#{$prefix}--tabs__nav-link:focus,
+    .#{$prefix}--tabs--container .#{$prefix}--tabs__nav-link:active {
+      width: auto;
+    }
+  }
+}
+
+@include exports('tabs-container-nav-link-width') {
+  @include tabs-container-nav-link-width;
+}

package/css/_tooltip.scss

@@ -0,0 +1,164 @@
+// Portal tooltip styles for rendering tooltips outside
+// overflow containers (e.g., inside modals).
+
+@import "carbon-components/scss/globals/scss/vars";
+@import "carbon-components/scss/globals/scss/tooltip";
+@import "carbon-components/scss/globals/scss/vendor/@carbon/elements/scss/import-once/import-once";
+
+@mixin tooltip-portal {
+  // Suppress the default CSS pseudo-element tooltip when a portal tooltip is active.
+  .#{$prefix}--tooltip--portal-active::before,
+  .#{$prefix}--tooltip--portal-active::after {
+    display: none;
+  }
+
+  .#{$prefix}--tooltip-portal {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    pointer-events: none;
+  }
+
+  [data-floating-portal][data-floating-direction='top'] .#{$prefix}--tooltip-portal {
+    flex-direction: column-reverse;
+  }
+
+  [data-floating-portal][data-floating-direction='top'][data-floating-intrinsic-align='start']
+    .#{$prefix}--tooltip-portal,
+  [data-floating-portal][data-floating-direction='bottom'][data-floating-intrinsic-align='start']
+    .#{$prefix}--tooltip-portal,
+  [data-floating-portal][data-floating-direction='top'][data-floating-intrinsic-align='end']
+    .#{$prefix}--tooltip-portal,
+  [data-floating-portal][data-floating-direction='bottom'][data-floating-intrinsic-align='end']
+    .#{$prefix}--tooltip-portal {
+    align-items: flex-start;
+  }
+
+  [data-floating-portal][data-floating-direction='top'][data-floating-intrinsic-align='end']
+    .#{$prefix}--tooltip-portal__content,
+  [data-floating-portal][data-floating-direction='bottom'][data-floating-intrinsic-align='end']
+    .#{$prefix}--tooltip-portal__content {
+    align-self: flex-end;
+  }
+
+  [data-floating-portal][data-floating-direction='top'][data-floating-intrinsic-align='start']
+    .#{$prefix}--tooltip-portal__caret,
+  [data-floating-portal][data-floating-direction='bottom'][data-floating-intrinsic-align='start']
+    .#{$prefix}--tooltip-portal__caret,
+  [data-floating-portal][data-floating-direction='top'][data-floating-intrinsic-align='end']
+    .#{$prefix}--tooltip-portal__caret,
+  [data-floating-portal][data-floating-direction='bottom'][data-floating-intrinsic-align='end']
+    .#{$prefix}--tooltip-portal__caret {
+    margin-left: calc(var(--ccs-tooltip-caret-nudge) - 0.3125rem);
+  }
+
+  [data-floating-portal][data-floating-direction='right'] .#{$prefix}--tooltip-portal {
+    flex-direction: row;
+    align-items: center;
+  }
+
+  [data-floating-portal][data-floating-direction='left'] .#{$prefix}--tooltip-portal {
+    flex-direction: row-reverse;
+    align-items: center;
+  }
+
+  .#{$prefix}--tooltip-portal[data-tooltip-type='definition'] {
+    filter: drop-shadow(0 2px 6px var(--cds-shadow, rgba(0, 0, 0, 0.3)));
+  }
+
+  .#{$prefix}--tooltip-portal__caret {
+    flex-shrink: 0;
+    width: 0;
+    height: 0.75rem;
+    border-right: 0.3125rem solid transparent;
+    border-bottom: 0.3125rem solid $inverse-02;
+    border-left: 0.3125rem solid transparent;
+    border-top: 0 solid transparent;
+  }
+
+  [data-floating-portal][data-floating-direction='top']
+    .#{$prefix}--tooltip-portal__caret {
+    border-top: 0.3125rem solid $inverse-02;
+    border-bottom: none;
+  }
+
+  [data-floating-portal][data-floating-direction='right']
+    .#{$prefix}--tooltip-portal__caret {
+    width: 0.75rem;
+    height: 0;
+    border-top: 0.3125rem solid transparent;
+    border-right: 0.3125rem solid $inverse-02;
+    border-bottom: 0.3125rem solid transparent;
+    border-left: 0;
+  }
+
+  [data-floating-portal][data-floating-direction='left']
+    .#{$prefix}--tooltip-portal__caret {
+    width: 0.75rem;
+    height: 0;
+    border-top: 0.3125rem solid transparent;
+    border-right: 0;
+    border-bottom: 0.3125rem solid transparent;
+    border-left: 0.3125rem solid $inverse-02;
+  }
+
+  .#{$prefix}--copy-btn--portal-active::before,
+  .#{$prefix}--copy-btn--portal-active .#{$prefix}--copy-btn__feedback {
+    display: none;
+  }
+
+  .#{$prefix}--tooltip-portal__content {
+    display: flex;
+    align-items: center;
+    width: max-content;
+    min-height: 1.5rem;
+    max-width: 13rem;
+    padding: 0.1875rem 1rem;
+    border-radius: 0.125rem;
+    background-color: $inverse-02;
+    color: $inverse-01;
+    font-size: 0.875rem;
+    font-weight: 400;
+    text-align: center;
+  }
+
+  .#{$prefix}--tooltip-portal[data-tooltip-type='definition']
+    .#{$prefix}--tooltip-portal__content {
+    @include tooltip--content('definition');
+
+    box-shadow: none;
+    position: static;
+    z-index: auto;
+    transform: none;
+    opacity: 1;
+    pointer-events: none;
+    display: flex;
+    align-items: center;
+    min-height: unset;
+    box-sizing: content-box;
+    white-space: normal;
+    word-break: break-word;
+  }
+
+  .#{$prefix}--tooltip-portal[data-tooltip-type='icon']
+    .#{$prefix}--tooltip-portal__content {
+    @include tooltip--content('icon');
+
+    box-shadow: 0 2px 6px var(--cds-shadow, rgba(0, 0, 0, 0.3));
+    position: static;
+    z-index: 1;
+    transform: none;
+    opacity: 1;
+    pointer-events: none;
+    display: flex;
+    align-items: center;
+    min-height: unset;
+    box-sizing: content-box;
+    white-space: normal;
+    word-break: break-word;
+  }
+}
+
+@include exports('tooltip-portal') {
+  @include tooltip-portal;
+}

package/css/_ui-shell.scss

@@ -0,0 +1,38 @@
+// Side nav overlay styles are defined here (and imported at bundle root) so they
+// are compiled outside carbon-components’ ui-shell media query. In Carbon, the
+// overlay is only styled inside a breakpoint-down block, so it does not appear
+// above the large viewport (e.g. 1056px). This override ensures the overlay is
+// visible and correctly stacked when the rail is expanded at all viewport sizes.
+
+//
+// Copyright IBM Corp. 2016, 2018
+//
+// 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/vendor/@carbon/elements/scss/import-once/import-once";
+
+/// Side nav overlay — applied at all viewport sizes (breaks out of Carbon media query).
+/// @access private
+/// @group ui-shell
+@mixin ui-shell {
+  .#{$prefix}--side-nav__overlay.#{$prefix}--side-nav__overlay--mobile.#{$prefix}--side-nav__overlay-active {
+    position: fixed;
+    inset: 0;
+    z-index: 6000;
+    display: block;
+    block-size: 100vh;
+    inline-size: 100vw;
+    background-color: var(--cds-overlay, rgba(0, 0, 0, 0.6));
+    opacity: 1;
+    transition:
+      opacity 0.3s cubic-bezier(0.5, 0, 0.1, 1),
+      background-color 0.3s cubic-bezier(0.5, 0, 0.1, 1);
+  }
+}
+
+@include exports("ui-shell") {
+  @include ui-shell;
+}