carbon-components-svelte 0.103.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/_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;
+}