@streamscloud/kit 0.2.42 → 0.9.0

package/dist/ui/page-toolbar/cmp.toolbar-button-item.svelte

@@ -1,34 +0,0 @@
-<script lang="ts">const { children, on } = $props();
-export {};
-</script>
-
-<button type="button" class="toolbar-button-item" onclick={() => on?.click?.()}>
-  {@render children()}
-</button>
-
-<!--
-@component
-A simple button item for toolbar panels. Renders children as clickable text.
-
-### CSS Custom Properties
-| Property | Description | Default |
-|---|---|---|
-| `--sc-kit--toolbar-button-item--color` | Text color | `var(--sc-color--text-primary, light-dark(black, white))` |
--->
-
-<style>.toolbar-button-item {
-  --_toolbar-button-item--color: var(
-    --sc-kit--toolbar-button-item--color,
-    var(--sc-color--text-primary, light-dark(#000000, #ffffff))
-  );
-  font-size: 0.875rem;
-  font-weight: 400;
-  line-height: 1.25rem;
-  color: var(--_toolbar-button-item--color);
-  padding: 0.25rem 0.5rem;
-  max-width: 100%;
-  text-overflow: ellipsis;
-  max-width: 100%;
-  white-space: nowrap;
-  overflow: hidden;
-}</style>

package/dist/ui/page-toolbar/cmp.toolbar-dropdown.svelte

@@ -1,29 +0,0 @@
-<script lang="ts">import { Button } from '../button';
-import { Dropdown } from '../dropdown';
-import { IconText } from '../icon-text';
-import ToolbarPanel from './cmp.toolbar-panel.svelte';
-import IconChevronDown from '@fluentui/svg-icons/icons/chevron_down_20_regular.svg?raw';
-const { title, triggerLabel, icon, iconColor, position = 'bottom-end', children, footer } = $props();
-</script>
-
-<div class="toolbar-dropdown">
-  <Dropdown position={position} keepDropdownOpen>
-    {#snippet trigger()}
-      <Button variant="standard" size="small">
-        <IconText icon={icon} iconColor={iconColor} secondaryIcon={IconChevronDown}>{triggerLabel}</IconText>
-      </Button>
-    {/snippet}
-    <ToolbarPanel title={title} footer={footer}>
-      {@render children()}
-    </ToolbarPanel>
-  </Dropdown>
-</div>
-
-<!--
-@component
-A toolbar dropdown button. Opens a panel with a title, body content, and optional footer.
--->
-
-<style>.toolbar-dropdown {
-  display: contents;
-}</style>

package/dist/ui/page-toolbar/cmp.toolbar-dropdown.svelte.d.ts

@@ -1,17 +0,0 @@
-import type { DropdownPosition } from '../dropdown';
-import type { IconColor } from '../icon';
-import type { Snippet } from 'svelte';
-type Props = {
-    title: string;
-    triggerLabel: string;
-    icon?: string;
-    iconColor?: IconColor;
-    /** @default 'bottom-end' */
-    position?: DropdownPosition;
-    children: Snippet;
-    footer?: Snippet;
-};
-/** A toolbar dropdown button. Opens a panel with a title, body content, and optional footer. */
-declare const Cmp: import("svelte").Component<Props, {}, "">;
-type Cmp = ReturnType<typeof Cmp>;
-export default Cmp;

package/dist/ui/placeholder/cmp.placeholder.svelte

@@ -1,65 +0,0 @@
-<script lang="ts">import { HtmlHelper } from '../../core/utils';
-const { imageSrc, title, body, actions } = $props();
-</script>
-
-<div class="placeholder">
-  <div class="placeholder__body">
-    <div class="placeholder__image">
-      <img src={imageSrc} alt="" />
-    </div>
-    <div class="placeholder__text">
-      <div class="placeholder__text-title">{@html title ? HtmlHelper.sanitizeHtml(title) : ''}</div>
-      <span class="placeholder__text-body">{body}</span>
-    </div>
-  </div>
-  <div class="placeholder-actions">
-    {#if actions}
-      {@render actions()}
-    {/if}
-  </div>
-</div>
-
-<!--
-@component
-Displays an empty-state placeholder with optional image, title, body text, and action buttons.
-
-### CSS Custom Properties
-| Property | Description | Default |
-|---|---|---|
-| `--sc-kit--placeholder--flex-direction` | Body layout direction | `column` |
-| `--sc-kit--placeholder--margin-top` | Top margin | `5.25em` |
--->
-
-<style>.placeholder {
-  --_placeholder--flex-direction: var(--sc-kit--placeholder--flex-direction, column);
-  --_placeholder--margin-top: var(--sc-kit--placeholder--margin-top, 5.25em);
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  margin-top: var(--_placeholder--margin-top);
-}
-.placeholder__body {
-  display: flex;
-  flex-direction: var(--_placeholder--flex-direction);
-  align-items: center;
-}
-.placeholder__text {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 0.3125em;
-  margin-bottom: 3.125em;
-}
-.placeholder__text-title {
-  font-size: 2em;
-  font-weight: 500;
-  text-align: center;
-}
-.placeholder__text-title :global(span) {
-  color: light-dark(#144ab0, #5a8dec);
-}
-.placeholder__text-body {
-  font-size: 1.125em;
-  color: light-dark(#6b7280, #d1d5db);
-  font-weight: 300;
-}</style>

package/dist/ui/placeholder/cmp.placeholder.svelte.d.ts

@@ -1,19 +0,0 @@
-import type { Snippet } from 'svelte';
-type Props = {
-    imageSrc?: string;
-    title?: string;
-    body: string;
-    actions?: Snippet;
-};
-/**
- * Displays an empty-state placeholder with optional image, title, body text, and action buttons.
- *
- * ### CSS Custom Properties
- * | Property | Description | Default |
- * |---|---|---|
- * | `--sc-kit--placeholder--flex-direction` | Body layout direction | `column` |
- * | `--sc-kit--placeholder--margin-top` | Top margin | `5.25em` |
- */
-declare const Cmp: import("svelte").Component<Props, {}, "">;
-type Cmp = ReturnType<typeof Cmp>;
-export default Cmp;

package/dist/ui/placeholder/index.d.ts

@@ -1 +0,0 @@
-export { default as Placeholder } from './cmp.placeholder.svelte';

package/dist/ui/placeholder/index.js

@@ -1 +0,0 @@
-export { default as Placeholder } from './cmp.placeholder.svelte';

package/dist/ui/selects/_multiselect.scss

@@ -1,282 +0,0 @@
-@use 'styles/colors';
-@use 'styles/functions';
-@use 'styles/mixins';
-
-@mixin multiselect {
-  --_multiselect--root--font-size: var(--sc-kit--multiselect--root--font-size, 1rem);
-  --_multiselect--height: var(--sc-kit--multiselect--height, #{functions.em(32)});
-  --_multiselect--width: var(--sc-kit--multiselect--width, 100%);
-  --_multiselect--background: var(--sc-kit--multiselect--background, light-dark(#{colors.$color-white}, #{colors.$color-gray-900}));
-  --_multiselect--background--disabled: var(--sc-kit--multiselect--background--disabled, light-dark(#{colors.$color-neutral-50}, #{colors.$color-neutral-800}));
-  --_multiselect--border-color: var(--sc-kit--multiselect--border-color, light-dark(#{colors.$color-neutral-100}, #{colors.$color-dark-800}));
-  --_multiselect--border-radius: var(--sc-kit--multiselect--border-radius, #{functions.em(4)});
-  --_multiselect--text--font-size: var(--sc-kit--multiselect--text--font-size, #{functions.em(14)});
-  --_multiselect--text--color: var(--sc-kit--multiselect--text--color, light-dark(#{colors.$color-gray-800}, #{colors.$color-white}));
-  --_multiselect--placeholder--color: var(--sc-kit--multiselect--placeholder--color, light-dark(#{colors.$color-neutral-300}, #{colors.$color-neutral-600}));
-  --_multiselect--icon--color: var(--sc-kit--multiselect--icon--color, light-dark(#{colors.$color-neutral-300}, #{colors.$color-neutral-600}));
-  --_multiselect--padding-inline: var(--sc-kit--multiselect--padding-inline, #{functions.em(8)});
-  --_multiselect--padding-block: var(--sc-kit--multiselect--padding-block, #{functions.em(4)});
-
-  --_multiselect--options--max-height: var(--sc-kit--multiselect--options--max-height, #{functions.em(320)});
-  --_multiselect--item--hover--background: var(
-    --sc-kit--multiselect--item--hover--background,
-    light-dark(#{colors.$color-gray-100}, #{colors.$color-gray-800})
-  );
-  --_multiselect--item--active--background: var(
-    --sc-kit--multiselect--item--active--background,
-    light-dark(#{colors.$color-neutral-50}, #{colors.$color-neutral-700})
-  );
-
-  --_multiselect--tag--color: var(--sc-kit--multiselect--tag--color, var(--_multiselect--text--color));
-  --_multiselect--tag--background: var(--sc-kit--multiselect--tag--background, var(--_multiselect--background));
-  --_multiselect--tag--border-color: var(--sc-kit--multiselect--tag--border-color, var(--_multiselect--border-color));
-  --_multiselect--tag--border-radius: var(--sc-kit--multiselect--tag--border-radius, var(--_multiselect--border-radius));
-  --_multiselect--tag--font-size: var(--sc-kit--multiselect--tag--font-size, calc(var(--_multiselect--text--font-size) * 0.9));
-  --_multiselect--tag--padding-inline: var(--sc-kit--multiselect--tag--padding-inline, var(--_multiselect--padding-inline));
-  --_multiselect--tag--padding-block: var(--sc-kit--multiselect--tag--padding-block, var(--_multiselect--padding-block));
-
-  --_multiselect--chevron--pointer-events: var(--sc-kit--multiselect--chevron--pointer-events, none);
-
-  --_multiselect--group-header--color: var(--sc-kit--multiselect--group-header--color, var(--_multiselect--placeholder--color));
-  --_multiselect--group-header--font-weight: var(--sc-kit--multiselect--group-header--font-weight, 500);
-  --_multiselect--group-item--padding-left: var(--sc-kit--multiselect--group-item--padding-left, #{functions.em(16)});
-
-  --_multiselect--inline--tag--background: var(
-    --sc-kit--multiselect--inline--tag--background,
-    light-dark(#{colors.$color-neutral-100}, #{colors.$color-neutral-700})
-  );
-
-  // svelte-select CSS variable mappings
-  --background: var(--_multiselect--background);
-  --border: 1px solid var(--_multiselect--border-color);
-  --border-focused: var(--border);
-  --border-hover: var(--border);
-  --border-radius: var(--_multiselect--border-radius);
-  --border-radius-focused: var(--border-radius);
-  --box-sizing: border-box;
-  --chevron-background: transparent;
-  --chevron-border: transparent;
-  --chevron-color: transparent;
-  --chevron-height: auto;
-  --chevron-pointer-events: var(--_multiselect--chevron--pointer-events);
-  --chevron-width: auto;
-  --disabled-background: var(--_multiselect--background--disabled);
-  --disabled-border-color: var(--_multiselect--border-color);
-  --disabled-color: var(--_multiselect--text--color);
-  --disabled-placeholder-color: var(--placeholder-color);
-  --disabled-placeholder-opacity: var(--placeholder-opacity);
-  --font-size: var(--_multiselect--text--font-size);
-  --height: var(--_multiselect--height);
-  --icons-color: var(--_multiselect--icon--color);
-  --indicators-bottom: auto;
-  --indicators-position: static;
-  --indicators-right: auto;
-  --indicators-top: auto;
-  --input--color: var(--_multiselect--text--color);
-  --input-left: 0;
-  --input-letter-spacing: 1;
-  --input-margin: 0;
-  --input-padding: 0 var(--_multiselect--padding-inline) 0 0;
-  --item-active-background: var(--_multiselect--item--active--background);
-  --item-color: var(--_multiselect--text--color);
-  --item-first-border-radius: 0;
-  --item-height: auto;
-  --item-hover-bg: var(--_multiselect--item--hover--background);
-  --item-hover-color: var(--_multiselect--text--color);
-  --item-is-active-bg: var(--_multiselect--item--active--background);
-  --item-is-active-color: var(--_multiselect--text--color);
-  --item-is-not-selectable-color: var(--_multiselect--group-header--color);
-  --item-line-height: 1.4;
-  --item-padding: var(--_multiselect--padding-block) var(--_multiselect--padding-inline);
-  --item-transition: auto;
-  --list-background: var(--background);
-  --list-border: var(--border);
-  --list-border-radius: var(--border-radius);
-  --list-max-height: var(--_multiselect--options--max-height);
-  --list-position: absolute;
-  --list-shadow: none;
-  --list-z-index: 2;
-  --loading--margin: 0;
-  --loading-color: var(--icons-color);
-  --loading-height: max-content;
-  --loading-width: max-content;
-  --margin: 0;
-  --max-height: var(--height);
-  --multi-item-active-outline: none;
-  --multi-item-bg: transparent;
-  --multi-item-border-radius: 0;
-  --multi-item-clear-icon-color: transparent;
-  --multi-item-color: transparent;
-  --multi-item-gap: 0;
-  --multi-item-height: 0;
-  --multi-item-margin: 0;
-  --multi-item-outline: none;
-  --multi-item-padding: 0;
-  --multi-max-width: 0;
-  --multi-select-input-margin: 0;
-  --multi-select-input-padding: 0;
-  --multi-select-padding: var(--_multiselect--padding-block) var(--_multiselect--padding-inline) var(--_multiselect--padding-block) 0;
-  --padding: 0;
-  --placeholder-color: var(--_multiselect--placeholder--color);
-  --placeholder-opacity: 0.8;
-  --selected-item-color: auto;
-  --selected-item-overflow: auto;
-  --selected-item-padding: auto;
-  --spinner-color: var(--icons-color);
-  --spinner-height: var(--_multiselect--text--font-size);
-  --spinner-width: var(--_multiselect--text--font-size);
-  --value-container-overflow: hidden;
-  --value-container-padding: 0 var(--_multiselect--padding-inline) 0 0;
-  --width: var(--_multiselect--width);
-  --group-title-color: var(--_multiselect--group-header--color);
-  --group-title-font-weight: var(--_multiselect--group-header--font-weight);
-  --group-title-font-size: var(--_multiselect--text--font-size);
-  --group-title-padding: var(--_multiselect--padding-block) var(--_multiselect--padding-inline);
-  --group-item-padding-left: var(--_multiselect--group-item--padding-left);
-
-  font-size: var(--_multiselect--root--font-size);
-  width: var(--_multiselect--width);
-  position: relative;
-
-  &__icon {
-    --sc-kit--icon--color: var(--_multiselect--icon--color);
-    --sc-kit--icon--size: #{functions.em(20)};
-    display: flex;
-    align-items: center;
-
-    &--prepend {
-      padding: 0 var(--_multiselect--padding-inline);
-
-      :global &:not(:has(*)) {
-        padding-right: 0 !important;
-      }
-    }
-  }
-
-  &__option {
-    font-size: var(--_multiselect--text--font-size);
-  }
-
-  &__selection {
-    font-size: var(--_multiselect--tag--font-size);
-    @include mixins.width(100%);
-    @include mixins.height(100%);
-    display: flex;
-    align-items: center;
-    min-width: 0;
-  }
-
-  &__selection-text {
-    @include mixins.ellipsis;
-  }
-
-  &__no-options {
-    color: var(--_multiselect--placeholder--color);
-    padding: var(--_multiselect--padding-block) var(--_multiselect--padding-inline);
-  }
-
-  &--disabled {
-    cursor: default;
-    pointer-events: none;
-  }
-
-  &--loading {
-    pointer-events: none;
-
-    &::after {
-      content: '';
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      background: light-dark(hsl(0, 0%, 97%), hsl(0, 0%, 3%));
-      opacity: 0.5;
-    }
-  }
-
-  :global(.value-container) {
-    gap: 0 !important;
-  }
-
-  &--inline {
-    --max-height: auto;
-    --multi-item-active-outline: none;
-    --multi-item-bg: var(--_multiselect--inline--tag--background);
-    --multi-item-border-radius: var(--_multiselect--border-radius);
-    --multi-item-clear-icon-color: var(--_multiselect--icon--color);
-    --multi-item-color: var(--_multiselect--text--color);
-    --multi-item-gap: var(--_multiselect--padding-inline);
-    --multi-item-height: calc(var(--_multiselect--height) - 2 * var(--_multiselect--padding-block));
-    --multi-item-margin: 0;
-    --multi-item-outline: 1px solid var(--_multiselect--border-color);
-    --multi-item-padding: var(--_multiselect--tag--padding-block) var(--_multiselect--tag--padding-inline);
-    --multi-max-width: #{functions.em(150)};
-    --multi-select-input-margin: 0;
-    --multi-select-input-padding: 0;
-    --multi-select-padding: var(--_multiselect--padding-block) var(--_multiselect--padding-inline) var(--_multiselect--padding-block) 0;
-
-    :global(.value-container) {
-      gap: #{functions.em(4)} !important;
-    }
-  }
-
-  &--inline-full-item {
-    --multi-max-width: none;
-  }
-
-  &--list-hidden {
-    --list-border: none;
-  }
-}
-
-@mixin multiselect-tags {
-  @include mixins.no-select;
-  display: flex;
-  flex-wrap: wrap;
-  gap: #{functions.em(4)};
-  margin-bottom: #{functions.em(4)};
-  min-width: 0;
-  width: 100%;
-
-  &__item {
-    display: flex;
-    gap: #{functions.em(6)};
-    vertical-align: middle;
-    border: 1px solid var(--_multiselect--tag--border-color);
-    font-size: var(--_multiselect--tag--font-size);
-    padding: var(--_multiselect--tag--padding-block) var(--_multiselect--tag--padding-inline);
-    color: var(--_multiselect--tag--color);
-    background: var(--_multiselect--tag--background);
-    border-radius: var(--_multiselect--tag--border-radius);
-    max-width: 100%;
-  }
-
-  &__item-text {
-    @include mixins.ellipsis;
-  }
-
-  &__deselect {
-    --sc-kit--icon--color: var(--_multiselect--icon--color);
-    --sc-kit--icon--size: #{functions.em(20)};
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-  }
-
-  &__drag-handle {
-    --sc-kit--icon--color: var(--_multiselect--icon--color);
-    --sc-kit--icon--size: #{functions.em(16)};
-    cursor: grab;
-    display: flex;
-    align-items: center;
-    font-size: 0.7em;
-    user-select: none;
-  }
-}
-
-@mixin multiselect-tags-others {
-  color: var(--_multiselect--placeholder--color);
-  font-size: var(--_multiselect--tag--font-size);
-  padding: var(--_multiselect--tag--padding-block) 0;
-}

package/dist/ui/selects/_singleselect.scss

@@ -1,176 +0,0 @@
-@use 'styles/colors';
-@use 'styles/functions';
-@use 'styles/mixins';
-
-@mixin singleselect {
-  --_singleselect--root--font-size: var(--sc-kit--singleselect--root--font-size, 1rem);
-  --_singleselect--height: var(--sc-kit--singleselect--height, #{functions.em(32)});
-  --_singleselect--width: var(--sc-kit--singleselect--width, 100%);
-  --_singleselect--background: var(--sc-kit--singleselect--background, light-dark(#{colors.$color-white}, #{colors.$color-gray-900}));
-  --_singleselect--background--disabled: var(
-    --sc-kit--singleselect--background--disabled,
-    light-dark(#{colors.$color-neutral-50}, #{colors.$color-neutral-800})
-  );
-  --_singleselect--border-color: var(--sc-kit--singleselect--border-color, light-dark(#{colors.$color-neutral-100}, #{colors.$color-dark-800}));
-  --_singleselect--border-radius: var(--sc-kit--singleselect--border-radius, #{functions.em(4)});
-  --_singleselect--text--font-size: var(--sc-kit--singleselect--text--font-size, #{functions.em(14)});
-  --_singleselect--text--color: var(--sc-kit--singleselect--text--color, light-dark(#{colors.$color-gray-800}, #{colors.$color-white}));
-  --_singleselect--placeholder--color: var(--sc-kit--singleselect--placeholder--color, light-dark(#{colors.$color-neutral-300}, #{colors.$color-neutral-600}));
-  --_singleselect--icon--color: var(--sc-kit--singleselect--icon--color, light-dark(#{colors.$color-neutral-300}, #{colors.$color-neutral-600}));
-  --_singleselect--padding-inline: var(--sc-kit--singleselect--padding-inline, #{functions.em(8)});
-  --_singleselect--padding-block: var(--sc-kit--singleselect--padding-block, #{functions.em(4)});
-
-  --_singleselect--options--max-height: var(--sc-kit--singleselect--options--max-height, #{functions.em(320)});
-  --_singleselect--item--hover--background: var(
-    --sc-kit--singleselect--item--hover--background,
-    light-dark(#{colors.$color-gray-100}, #{colors.$color-gray-800})
-  );
-  --_singleselect--item--active--background: var(
-    --sc-kit--singleselect--item--active--background,
-    light-dark(#{colors.$color-neutral-50}, #{colors.$color-neutral-700})
-  );
-
-  --_singleselect--group-header--color: var(--sc-kit--singleselect--group-header--color, var(--_singleselect--placeholder--color));
-  --_singleselect--group-header--font-weight: var(--sc-kit--singleselect--group-header--font-weight, 500);
-  --_singleselect--group-item--padding-left: var(--sc-kit--singleselect--group-item--padding-left, #{functions.em(16)});
-
-  // svelte-select CSS variable mappings
-  --background: var(--_singleselect--background);
-  --border: 1px solid var(--_singleselect--border-color);
-  --border-focused: var(--border);
-  --border-hover: var(--border);
-  --border-radius: var(--_singleselect--border-radius);
-  --border-radius-focused: var(--border-radius);
-  --box-sizing: border-box;
-  --chevron-background: transparent;
-  --chevron-border: transparent;
-  --chevron-color: transparent;
-  --chevron-height: auto;
-  --chevron-pointer-events: none;
-  --chevron-width: auto;
-  --disabled-background: var(--_singleselect--background--disabled);
-  --disabled-border-color: var(--_singleselect--border-color);
-  --disabled-color: var(--_singleselect--text--color);
-  --disabled-placeholder-color: var(--placeholder-color);
-  --disabled-placeholder-opacity: var(--placeholder-opacity);
-  --font-size: var(--_singleselect--text--font-size);
-  --height: var(--_singleselect--height);
-  --icons-color: var(--_singleselect--icon--color);
-  --indicators-bottom: auto;
-  --indicators-position: static;
-  --indicators-right: auto;
-  --indicators-top: auto;
-  --input--color: var(--_singleselect--text--color);
-  --input-left: 0;
-  --input-letter-spacing: 1;
-  --input-margin: 0;
-  --input-padding: 0 var(--_singleselect--padding-inline) 0 0;
-  --item-active-background: var(--_singleselect--item--active--background);
-  --item-color: var(--_singleselect--text--color);
-  --item-first-border-radius: 0;
-  --item-height: auto;
-  --item-hover-bg: var(--_singleselect--item--hover--background);
-  --item-hover-color: var(--_singleselect--text--color);
-  --item-is-active-bg: var(--_singleselect--item--active--background);
-  --item-is-active-color: var(--_singleselect--text--color);
-  --item-is-not-selectable-color: var(--_singleselect--group-header--color);
-  --item-line-height: 1.4;
-  --item-padding: var(--_singleselect--padding-block) var(--_singleselect--padding-inline);
-  --item-transition: auto;
-  --list-background: var(--background);
-  --list-border: var(--border);
-  --list-border-radius: var(--border-radius);
-  --list-max-height: var(--_singleselect--options--max-height);
-  --list-position: absolute;
-  --list-shadow: none;
-  --list-z-index: 2;
-  --loading--margin: 0;
-  --loading-color: var(--icons-color);
-  --loading-height: max-content;
-  --loading-width: max-content;
-  --margin: 0;
-  --max-height: var(--height);
-  --padding: 0 var(--_singleselect--padding-inline) 0 0;
-  --placeholder-color: var(--_singleselect--placeholder--color);
-  --placeholder-opacity: 0.8;
-  --selected-item-color: auto;
-  --selected-item-overflow: auto;
-  --selected-item-padding: auto;
-  --spinner-color: var(--icons-color);
-  --spinner-height: var(--_singleselect--text--font-size);
-  --spinner-width: var(--_singleselect--text--font-size);
-  --value-container-overflow: hidden;
-  --value-container-padding: 0;
-  --width: var(--_singleselect--width);
-  --group-title-color: var(--_singleselect--group-header--color);
-  --group-title-font-weight: var(--_singleselect--group-header--font-weight);
-  --group-title-font-size: var(--_singleselect--text--font-size);
-  --group-title-padding: var(--_singleselect--padding-block) var(--_singleselect--padding-inline);
-  --group-item-padding-left: var(--_singleselect--group-item--padding-left);
-
-  font-size: var(--_singleselect--root--font-size);
-  width: var(--_singleselect--width);
-  position: relative;
-
-  &__icon {
-    --sc-kit--icon--color: var(--_singleselect--icon--color);
-    --sc-kit--icon--size: #{functions.em(20)};
-    display: flex;
-    align-items: center;
-
-    &--prepend {
-      padding: 0 var(--_singleselect--padding-inline);
-
-      :global &:not(:has(*)) {
-        padding-right: 0 !important;
-      }
-    }
-  }
-
-  &__option {
-    font-size: var(--_singleselect--text--font-size);
-    @include mixins.ellipsis;
-
-    &--faded {
-      color: var(--_singleselect--placeholder--color);
-      opacity: 0.5;
-    }
-  }
-
-  &__selection {
-    @include mixins.width(100%);
-    @include mixins.height(100%);
-    display: flex;
-    align-items: center;
-    min-width: 0;
-  }
-
-  &__selection-text {
-    @include mixins.ellipsis;
-  }
-
-  &__no-options {
-    color: var(--_singleselect--placeholder--color);
-    padding: var(--_singleselect--padding-block) var(--_singleselect--padding-inline);
-  }
-
-  &--disabled {
-    cursor: default;
-    pointer-events: none;
-  }
-
-  &--loading {
-    pointer-events: none;
-
-    &::after {
-      content: '';
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      background: light-dark(hsl(0, 0%, 97%), hsl(0, 0%, 3%));
-      opacity: 0.5;
-    }
-  }
-}