@pgcorp/ui-kit 0.2.0 → 0.3.0

package/README.md

@@ -6,7 +6,7 @@
 **A typed PGCorp design system for Vue 3, spanning foundational controls and
 complete workbench interfaces.**
 
-`Vue 3` · `TypeScript` · `118 exact exports` · `6 themes` · `MIT`
+`Vue 3` · `TypeScript` · `122 exact exports` · `6 themes` · `MIT`
 
 ## Что входит / What is included
 
@@ -32,7 +32,7 @@ npm install @pgcorp/ui-kit vue pinia vue-router
 | Требование / Requirement | Версия / Version |
 | --- | --- |
 | Node.js | `>=20.19.0` |
-| npm | `>=11.10.0 <12` |
+| npm | `>=10.9.2 <12` |
 | Vue | `^3.5.0` |
 | Pinia | `^3.0.4` |
 | Vue Router | `^5.0.0` |
@@ -82,7 +82,7 @@ import SButton from '@pgcorp/ui-kit/shared/controls/SButton.vue'
     content-layout="stack"
     content-gap="content"
   >
-    <SButton variant="primary">
+    <SButton appearance="solid" severity="primary">
       Сохранить
     </SButton>
   </SPanel>
@@ -100,9 +100,9 @@ monorepo alias or copied UI-kit files.
 | Группа / Group | Назначение / Purpose | Примеры exports / Example exports |
 | --- | --- | --- |
 | Layout | App shell, dock regions, stacks, workbench layout | `layout/SAppShell.vue`, `layout/SStack.vue`, `layout/SWorkbenchLayout.vue` |
-| Controls | Buttons, fields, inputs, selects, menus, selection | `shared/controls/SButton.vue`, `shared/controls/SInputText.vue`, `shared/controls/SSelect.vue` |
+| Controls | Buttons, fields, inputs, switches, selects, comboboxes, menus | `shared/controls/SButton.vue`, `shared/controls/SSwitch.vue`, `shared/controls/SCombobox.vue` |
 | Containers | Panels, modal, drawer, popover, sidebars | `shared/containers/SPanel.vue`, `shared/containers/SModal.vue`, `shared/containers/SPopover.vue` |
-| Data display | Tables, status, progress, code, JSON, tooltips | `shared/data-display/STable.vue`, `shared/data-display/SCodeBlock.vue`, `shared/data-display/SStatus.vue` |
+| Data display | Tables, chips, status, progress, code, JSON, tooltips | `shared/data-display/STable.vue`, `shared/data-display/SChip.vue`, `shared/data-display/SStatus.vue` |
 | Navigation | Tabs, breadcrumbs, catalog navigation, wizard | `shared/navigation/STabs.vue`, `shared/navigation/SBreadcrumbs.vue`, `shared/navigation/SWizardSteps.vue` |
 | Complex surfaces | Tree, Kanban, data grid, SQL editor, graph | `shared/complex/STree.vue`, `shared/database/SDataGrid.vue`, `shared/graph/SGraphViewport.vue` |
 | Runtime | Themes, variants, icons, composables, stores | `theme`, `variants`, `icons`, `composables/useNotifier`, `stores/useNotifierStore` |

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pgcorp/ui-kit",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "Typed Vue 3 design system with accessible components, semantic themes, and workbench patterns.",
   "type": "module",
   "types": "./index.ts",
@@ -38,7 +38,7 @@
   },
   "engines": {
     "node": ">=20.19.0",
-    "npm": ">=11.10.0 <12"
+    "npm": ">=10.9.2 <12"
   },
   "publishConfig": {
     "access": "public",
@@ -207,6 +207,9 @@
       "shared/controls/SColorSelect.vue": [
         "src/components/shared/controls/SColorSelect.vue"
       ],
+      "shared/controls/SCombobox.vue": [
+        "src/components/shared/controls/SCombobox.vue"
+      ],
       "shared/controls/SContextMenu.vue": [
         "src/components/shared/controls/SContextMenu.vue"
       ],
@@ -261,6 +264,9 @@
       "shared/controls/SSelect.vue": [
         "src/components/shared/controls/SSelect.vue"
       ],
+      "shared/controls/SSwitch.vue": [
+        "src/components/shared/controls/SSwitch.vue"
+      ],
       "shared/controls/STextarea.vue": [
         "src/components/shared/controls/STextarea.vue"
       ],
@@ -279,6 +285,9 @@
       "shared/data-display/SBadge.vue": [
         "src/components/shared/data-display/SBadge.vue"
       ],
+      "shared/data-display/SChip.vue": [
+        "src/components/shared/data-display/SChip.vue"
+      ],
       "shared/data-display/SCodeBlock.vue": [
         "src/components/shared/data-display/SCodeBlock.vue"
       ],
@@ -468,6 +477,7 @@
     "./shared/controls/SCheckboxGroup.vue": "./src/components/shared/controls/SCheckboxGroup.vue",
     "./shared/controls/SChoiceCards.vue": "./src/components/shared/controls/SChoiceCards.vue",
     "./shared/controls/SColorSelect.vue": "./src/components/shared/controls/SColorSelect.vue",
+    "./shared/controls/SCombobox.vue": "./src/components/shared/controls/SCombobox.vue",
     "./shared/controls/SContextMenu.vue": "./src/components/shared/controls/SContextMenu.vue",
     "./shared/controls/SContextToggleButton.vue": "./src/components/shared/controls/SContextToggleButton.vue",
     "./shared/controls/SDragHandle.vue": "./src/components/shared/controls/SDragHandle.vue",
@@ -486,12 +496,14 @@
     "./shared/controls/SRange.vue": "./src/components/shared/controls/SRange.vue",
     "./shared/controls/SSegmentedControl.vue": "./src/components/shared/controls/SSegmentedControl.vue",
     "./shared/controls/SSelect.vue": "./src/components/shared/controls/SSelect.vue",
+    "./shared/controls/SSwitch.vue": "./src/components/shared/controls/SSwitch.vue",
     "./shared/controls/STextarea.vue": "./src/components/shared/controls/STextarea.vue",
     "./shared/data-display/json": "./src/components/shared/data-display/json.ts",
     "./shared/data-display/SActionCard.vue": "./src/components/shared/data-display/SActionCard.vue",
     "./shared/data-display/SActionList.vue": "./src/components/shared/data-display/SActionList.vue",
     "./shared/data-display/SActionListItem.vue": "./src/components/shared/data-display/SActionListItem.vue",
     "./shared/data-display/SBadge.vue": "./src/components/shared/data-display/SBadge.vue",
+    "./shared/data-display/SChip.vue": "./src/components/shared/data-display/SChip.vue",
     "./shared/data-display/SCodeBlock.vue": "./src/components/shared/data-display/SCodeBlock.vue",
     "./shared/data-display/SCodeEditor.vue": "./src/components/shared/data-display/SCodeEditor.vue",
     "./shared/data-display/SCodeSearchPanel.vue": "./src/components/shared/data-display/SCodeSearchPanel.vue",
@@ -582,7 +594,7 @@
     "eslint-plugin-vue": "^10.8.0",
     "jsdom": "^28.1.0",
     "pinia": "^3.0.4",
-    "postcss": "8.5.16",
+    "postcss": "8.5.19",
     "postcss-selector-parser": "7.1.4",
     "storybook": "10.5.3",
     "typescript": "^5.9.3",

package/src/components/layout/SStack.css

@@ -1,8 +1,9 @@
 @reference "../../styles/reference.css";
 
-.s-stack {
-  @apply flex min-h-0 min-w-0 flex-col;
-}
+.s-stack { @apply flex min-h-0 min-w-0; }
+
+.s-stack[data-direction='column'] { @apply flex-col; }
+.s-stack[data-direction='row'] { @apply flex-row; }
 
 .s-stack[data-fill='container'] {
   @apply h-full flex-1;
@@ -13,6 +14,11 @@
 .s-stack[data-align='end'] { @apply items-end; }
 .s-stack[data-align='stretch'] { @apply items-stretch; }
 
+.s-stack[data-justify='start'] { @apply justify-start; }
+.s-stack[data-justify='center'] { @apply justify-center; }
+.s-stack[data-justify='end'] { @apply justify-end; }
+.s-stack[data-justify='between'] { @apply justify-between; }
+
 .s-stack[data-gap='tight'] { gap: 0.25rem; }
 .s-stack[data-gap='control'] { gap: var(--s-space-control-gap); }
 .s-stack[data-gap='content'] { gap: var(--s-space-content-gap); }

package/src/components/layout/SStack.vue

@@ -4,9 +4,11 @@
     v-bind="ownedAttrs.bindings()"
     class="s-stack"
     :data-gap="gap"
+    :data-direction="direction"
     :data-padding-end="paddingEnd"
     :data-fill="fill"
     :data-align="align"
+    :data-justify="justify"
   >
     <slot />
   </component>
@@ -22,12 +24,14 @@ export type SStackGap = 'none' | 'tight' | 'control' | 'content' | 'section' | '
 export type SStackPadding = 'none' | 'control' | 'content' | 'section' | 'panel'
 
 /**
- * Вертикальный layout-owner с ограниченной семантической шкалой интервалов.
- * Vertical layout owner with a constrained semantic spacing scale.
+ * Flex layout-owner с ограниченной семантической шкалой интервалов.
+ * Flex layout owner with a constrained semantic spacing scale.
  */
 export interface Props {
   /** Семантический HTML-container без интерактивной роли. / Semantic non-interactive HTML container. */
   as?: 'div' | 'section' | 'article' | 'ul' | 'ol'
+  /** Направление основной оси. / Main-axis direction. */
+  direction?: 'column' | 'row'
   /** Интервал между непосредственными участниками. / Gap between direct participants. */
   gap?: SStackGap
   /** Нижний внутренний отступ для scroll-safe composition. / End padding for scroll-safe composition. */
@@ -36,14 +40,18 @@ export interface Props {
   fill?: 'content' | 'container'
   /** Выравнивание участников по поперечной оси. / Cross-axis participant alignment. */
   align?: 'stretch' | 'start' | 'center' | 'end'
+  /** Распределение участников по основной оси. / Main-axis participant distribution. */
+  justify?: 'start' | 'center' | 'end' | 'between'
 }
 
 withDefaults(defineProps<Props>(), {
   as: 'div',
+  direction: 'column',
   gap: 'content',
   paddingEnd: 'none',
   fill: 'content',
   align: 'stretch',
+  justify: 'start',
 })
 
 const ownedAttrs = useOwnedAttrs({ component: 'SStack', owner: 'semantic stack root' })

package/src/components/shared/containers/SPageHeader.css

@@ -31,6 +31,17 @@
   @apply m-0 text-2xl font-semibold leading-tight text-surface-900 dark:text-surface-50;
 }
 
+.s-page-header__title[data-presentation='assistive'] {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+
 .s-page-header[data-size='compact'] .s-page-header__title {
   @apply text-xl;
 }

package/src/components/shared/containers/SPageHeader.vue

@@ -11,6 +11,7 @@ withDefaults(defineProps<{
   appearance?: 'plain' | 'panel'
   size?: 'compact' | 'default'
   actionsLayout?: 'responsive' | 'inline' | 'stacked'
+  titlePresentation?: 'visible' | 'assistive'
 }>(), {
   description: undefined,
   eyebrow: undefined,
@@ -18,6 +19,7 @@ withDefaults(defineProps<{
   appearance: 'panel',
   size: 'default',
   actionsLayout: 'responsive',
+  titlePresentation: 'visible',
 })
 
 const ownedAttrs = useOwnedAttrs({ component: 'SPageHeader', owner: 'page header root' })
@@ -33,7 +35,11 @@ const ownedAttrs = useOwnedAttrs({ component: 'SPageHeader', owner: 'page header
   >
     <div class="s-page-header__copy">
       <div v-if="eyebrow" class="s-page-header__eyebrow">{{ eyebrow }}</div>
-      <component :is="`h${headingLevel}`" class="s-page-header__title">{{ title }}</component>
+      <component
+        :is="`h${headingLevel}`"
+        class="s-page-header__title"
+        :data-presentation="titlePresentation"
+      >{{ title }}</component>
       <p v-if="description" class="s-page-header__description">{{ description }}</p>
     </div>
     <div v-if="$slots.actions" class="s-page-header__actions">

package/src/components/shared/controls/SButton.css

@@ -146,6 +146,10 @@
   background: var(--s-button-solid-background-hover);
 }
 
+.s-button[aria-disabled='true'] {
+  pointer-events: none;
+}
+
 .s-button[data-appearance='solid']:active:not(:disabled) {
   border-color: var(--s-button-solid-background-active);
   background: var(--s-button-solid-background-active);
@@ -219,6 +223,14 @@
   cursor: not-allowed;
 }
 
+.s-button[aria-disabled='true'] {
+  border-color: transparent;
+  background: var(--s-button-disabled-background);
+  box-shadow: none;
+  color: var(--s-button-disabled-foreground);
+  cursor: not-allowed;
+}
+
 .s-button[data-appearance='ghost']:disabled,
 .s-button[data-appearance='text']:disabled {
   background: transparent;
@@ -246,6 +258,7 @@
 .s-button[data-width='fit'] { width: fit-content; }
 .s-button[data-width='full'] .s-button__content { width: 100%; }
 .s-button[data-content-align='start'] .s-button__content { justify-content: flex-start; text-align: left; }
+.s-button[data-content-align='end'] .s-button__content { justify-content: flex-end; text-align: right; }
 .s-button[data-content-align='between'] .s-button__content { justify-content: space-between; text-align: left; }
 
 .s-button[data-shape='pill'],

package/src/components/shared/controls/SButton.vue

@@ -1,7 +1,8 @@
 <template>
-  <button
-    ref="buttonRef"
-    v-bind="buttonBindings"
+  <component
+    :is="rootComponent"
+    :ref="setRootRef"
+    v-bind="rootBindings"
     class="s-button"
     :data-severity="severity"
     :data-size="size"
@@ -17,8 +18,7 @@
     :data-loading="loading || undefined"
     :aria-pressed="pressed"
     :aria-busy="busy || loading || undefined"
-    :disabled="disabled || loading"
-    :type="type"
+    @click="handleClick"
   >
     <span v-if="loading" class="s-button__loader" aria-hidden="true">
       <SProgressIndicator
@@ -37,7 +37,7 @@
       <component :is="leadingIcon" v-else-if="leadingIcon" class="s-button__icon s-button__icon--leading" aria-hidden="true" />
       <span v-if="label" class="s-button__label">{{ label }}</span>
       <PassiveContentBoundary v-if="renderDefaultSlot" :contract="passiveContentContract">
-        <slot />
+        <component :is="defaultContentComponent" />
       </PassiveContentBoundary>
       <span v-if="badge !== undefined" class="s-button__badge-slot">
         <SBadge :severity="badgeSeverity" size="xs">{{ badge }}</SBadge>
@@ -52,14 +52,16 @@
       ><ChevronRight /></span>
       <component :is="trailingIcon" v-else-if="trailingIcon" class="s-button__icon s-button__icon--trailing" aria-hidden="true" />
     </span>
-  </button>
+  </component>
 </template>
 
 <script setup lang="ts">
-import { computed, ref, watchEffect } from 'vue'
-import type { Component, VNodeChild } from 'vue'
+import { computed, getCurrentInstance, ref, watchEffect } from 'vue'
+import type { Component, ComponentPublicInstance } from 'vue'
+import { RouterLink } from 'vue-router'
 import { ChevronRight } from '../../icons/sputnigUiIcons'
 import type { InteractiveElementApi } from '../../../internal/interactiveElement'
+import { resolveLinkTarget } from '../../../internal/linkTarget'
 import { useOwnedAttrs } from '../../../internal/ownedAttrs'
 import {
   PassiveContentBoundary,
@@ -69,6 +71,10 @@ import {
 import { useTreeActionRegistration } from '../_internal/treeRuntime'
 import SBadge, { type BadgeSeverity } from '../data-display/SBadge.vue'
 import SProgressIndicator, { type SProgressIndicatorSize } from '../data-display/SProgressIndicator.vue'
+import type {
+  HrefLinkDestination,
+  RouterLinkDestination,
+} from './SLink'
 
 defineOptions({ inheritAttrs: false })
 
@@ -79,7 +85,7 @@ export type SButtonDensity = 'default' | 'compact'
 export type SButtonSpacing = 'default' | 'tight'
 export type SButtonHoverSurface = 'self' | 'parent'
 export type SButtonWidth = 'auto' | 'fit' | 'full'
-export type SButtonContentAlign = 'center' | 'start' | 'between'
+export type SButtonContentAlign = 'center' | 'start' | 'end' | 'between'
 export type SButtonAppearance = 'solid' | 'soft' | 'outline' | 'ghost' | 'text'
 export type SButtonShape = 'default' | 'pill' | 'square' | 'circle' | 'row'
 export type SButtonNativeType = 'button' | 'reset' | 'submit'
@@ -89,10 +95,10 @@ export interface SButtonDisclosure {
   iconPlacement?: 'leading' | 'trailing' | 'none'
 }
 
-/** Typed native-button ownership surface for composite UI-kit components. / Типизированная ownership-поверхность native button для составных UI-kit-компонентов. */
-export type SButtonApi = InteractiveElementApi<HTMLButtonElement>
+/** Typed interactive owner API for action and navigation buttons. / Типизированная API-поверхность action/navigation button. */
+export type SButtonApi = InteractiveElementApi<HTMLButtonElement | HTMLAnchorElement>
 
-export interface Props {
+interface SButtonPresentationProps {
   label?: string
   severity?: SButtonSeverity
   size?: SButtonSize
@@ -116,9 +122,24 @@ export interface Props {
   pressed?: boolean | 'mixed'
   busy?: boolean
   disclosure?: SButtonDisclosure
+}
+
+export type SButtonActionProps = SButtonPresentationProps & {
+  href?: never
+  to?: never
+  target?: never
+  rel?: never
   type?: SButtonNativeType
 }
 
+export type SButtonNavigationProps = SButtonPresentationProps & (
+  | (HrefLinkDestination & { type?: never })
+  | (RouterLinkDestination & { type?: never })
+)
+
+/** Strict action/navigation XOR with a shared button presentation. */
+export type Props = SButtonActionProps | SButtonNavigationProps
+
 const props = withDefaults(defineProps<Props>(), {
   label: undefined,
   severity: 'primary',
@@ -143,23 +164,57 @@ const props = withDefaults(defineProps<Props>(), {
   pressed: undefined,
   busy: false,
   disclosure: undefined,
-  type: 'button',
+  href: undefined,
+  to: undefined,
+  target: undefined,
+  rel: undefined,
+  type: undefined,
 })
-const slots = defineSlots<{
-  /** Пассивная метка/графика действия; вложенные controls запрещены. / Passive action label/graphics; nested controls are forbidden. */
-  default?: () => VNodeChild
+const emit = defineEmits<{
+  click: [event: MouseEvent]
 }>()
-const buttonRef = ref<HTMLButtonElement | null>(null)
+const componentInstance = getCurrentInstance()
+if (!componentInstance) throw new Error('SButton: component instance is unavailable')
+const buttonSlots = componentInstance.slots
+const defaultContentComponent = (): ReturnType<NonNullable<typeof buttonSlots.default>> => (
+  buttonSlots.default?.() ?? []
+)
+const rootRef = ref<HTMLButtonElement | HTMLAnchorElement | null>(null)
 const ownedAttrs = useOwnedAttrs({ component: 'SButton', owner: 'native button' })
 const isRegisteredTreeAction = useTreeActionRegistration({
   owner: 'SButton',
-  element: buttonRef,
+  element: rootRef,
   disabled: () => props.disabled || props.loading,
 })
 
 useInteractiveLeafRegistration({ owner: 'SButton' })
 
-const buttonBindings = computed(() => {
+const navigationTarget = computed(() => {
+  const hasHref = props.href !== undefined
+  const hasTo = props.to !== undefined
+  if (hasHref && hasTo) {
+    throw new TypeError('SButton: передайте не более одного navigation target — href или to')
+  }
+  if (!hasHref && !hasTo) return null
+  if (props.type !== undefined) {
+    throw new TypeError('SButton: navigation target несовместим с native button type')
+  }
+  return resolveLinkTarget({
+    href: props.href,
+    to: props.to,
+    target: props.target,
+    rel: props.rel,
+    owner: 'SButton',
+  })
+})
+const navigationUnavailable = computed(() => props.disabled || props.loading)
+const rootComponent = computed(() => {
+  const target = navigationTarget.value
+  if (!target || navigationUnavailable.value) return target ? 'a' : 'button'
+  return target.kind === 'router' ? RouterLink : 'a'
+})
+
+const rootBindings = computed(() => {
   const bindings = ownedAttrs.bindings()
   const managedBindings = isRegisteredTreeAction ? { ...bindings, tabindex: -1 } : bindings
   const semanticBindings = props.disclosure
@@ -169,17 +224,31 @@ const buttonBindings = computed(() => {
         'aria-controls': props.disclosure.controls,
       }
     : managedBindings
-  if (!props.loading) return semanticBindings
+  const target = navigationTarget.value
+  const elementBindings = target === null
+    ? {
+        ...semanticBindings,
+        disabled: props.disabled || props.loading || undefined,
+        type: props.type ?? 'button',
+      }
+    : navigationUnavailable.value
+      ? {
+          ...semanticBindings,
+          'aria-disabled': true,
+          tabindex: -1,
+        }
+      : { ...semanticBindings, ...target.bindings }
+  if (!props.loading) return elementBindings
 
-  const externalAccessibleName = semanticBindings['aria-label']
+  const externalAccessibleName = elementBindings['aria-label']
   const accessibleName = [props.loadingLabel, props.label, externalAccessibleName]
     .find((candidate): candidate is string => typeof candidate === 'string' && candidate.trim().length > 0)
-  if (!accessibleName && !slots.default) {
+  if (!accessibleName && !buttonSlots.default) {
     throw new Error('SButton: loading action requires label, loadingLabel, or aria-label')
   }
   return accessibleName
-    ? { ...semanticBindings, 'aria-label': accessibleName }
-    : semanticBindings
+    ? { ...elementBindings, 'aria-label': accessibleName }
+    : elementBindings
 })
 
 const passiveContentContract: PassiveContentContract = {
@@ -189,6 +258,13 @@ const passiveContentContract: PassiveContentContract = {
 }
 
 watchEffect(() => {
+  const target = navigationTarget.value
+  if (target && props.pressed !== undefined) {
+    throw new Error('SButton: navigation target несовместим с pressed toggle semantics')
+  }
+  if (target && props.disclosure !== undefined) {
+    throw new Error('SButton: navigation target несовместим с disclosure trigger semantics')
+  }
   if (props.disclosure && props.disclosure.controls.trim().length === 0) {
     throw new Error('SButton: disclosure.controls must be a non-empty id')
   }
@@ -202,17 +278,42 @@ watchEffect(() => {
 })
 
 const isIconOnly = computed(() => props.iconOnly || (
-  props.label === '' && Boolean(props.leadingIcon || props.trailingIcon || slots.default)
+  props.label === '' && Boolean(props.leadingIcon || props.trailingIcon || buttonSlots.default)
 ))
 const renderDefaultSlot = computed(() => props.label === undefined || (
   props.label === '' && !props.leadingIcon && !props.trailingIcon
 ))
 const progressIndicatorSize = computed<SProgressIndicatorSize>(() => props.size === 'lg' ? 'sm' : 'xs')
 
-const getElement = (): HTMLButtonElement => {
-  const element = buttonRef.value
+function setRootRef(target: Element | ComponentPublicInstance | null): void {
+  if (target === null) {
+    rootRef.value = null
+    return
+  }
+  if (target instanceof HTMLButtonElement || target instanceof HTMLAnchorElement) {
+    rootRef.value = target
+    return
+  }
+  const element: unknown = Reflect.get(target, '$el')
+  if (!(element instanceof HTMLAnchorElement)) {
+    throw new TypeError('SButton: RouterLink root must resolve to an HTMLAnchorElement')
+  }
+  rootRef.value = element
+}
+
+function handleClick(event: MouseEvent): void {
+  if (navigationTarget.value && navigationUnavailable.value) {
+    event.preventDefault()
+    event.stopImmediatePropagation()
+    return
+  }
+  emit('click', event)
+}
+
+const getElement = (): HTMLButtonElement | HTMLAnchorElement => {
+  const element = rootRef.value
   if (!element) {
-    throw new Error('SButton: native button element is unavailable')
+    throw new Error('SButton: interactive element is unavailable')
   }
   return element
 }

package/src/components/shared/controls/SCombobox.css

@@ -0,0 +1,9 @@
+@reference "../../../styles/reference.css";
+
+.s-combobox-anchor {
+  @apply w-full min-w-0;
+}
+
+.s-combobox-layer {
+  @apply max-w-[calc(100vw-1rem)];
+}