@pgcorp/ui-kit 0.1.2 → 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.1.2",
+  "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"
       ],
@@ -252,12 +255,18 @@
       "shared/controls/SMenuSurface.vue": [
         "src/components/shared/controls/SMenuSurface.vue"
       ],
+      "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"
       ],
@@ -276,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"
       ],
@@ -465,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",
@@ -480,14 +493,17 @@
     "./shared/controls/SListbox.vue": "./src/components/shared/controls/SListbox.vue",
     "./shared/controls/SMarker.vue": "./src/components/shared/controls/SMarker.vue",
     "./shared/controls/SMenuSurface.vue": "./src/components/shared/controls/SMenuSurface.vue",
+    "./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",
@@ -578,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/SSideMenuButton.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :class="{ 'mt-2': offsetTop }">
+  <div class="w-full" :class="{ 'mt-2': offsetTop }">
     <SDropdownMenu
       v-if="contextMenuItems.length && contextMenuTrigger === 'click'"
       v-slot="{ triggerAttrs }"
@@ -93,12 +93,13 @@ const buttonProps = computed(() => {
     'contentAlign': props.showLabel ? 'start' as const : 'center' as const,
     'disabled': props.disabled,
     'iconOnly': !props.showLabel,
+    'iconSize': 'large' as const,
     'label': props.showLabel ? props.title : undefined,
     'leadingIcon': props.icon,
     'severity': props.active && !props.disabled ? 'primary' as const : 'secondary' as const,
-    'shape': props.showLabel ? 'row' as const : 'circle' as const,
-    'size': 'md' as const,
-    'width': props.showLabel ? 'full' as const : 'auto' as const,
+    'shape': 'row' as const,
+    'size': props.showLabel ? 'md' as const : 'lg' as const,
+    'width': 'full' as const,
   }
 })
 </script>

package/src/components/layout/SSideMenuRail.vue

@@ -3,16 +3,13 @@
     v-if="visible"
     v-bind="ownedAttrs.bindings()"
     class="flex h-full min-h-0 flex-shrink-0 flex-col gap-1 overflow-x-hidden overflow-y-auto border-r border-surface-200 bg-surface-0 p-1 transition-[width] duration-[var(--s-motion-fast)] dark:border-surface-800 dark:bg-surface-950"
-    :class="expanded ? 'w-56 items-stretch' : 'w-12 items-center'"
+    :class="expanded ? 'w-56 items-stretch' : 'w-14 items-stretch'"
   >
-    <div class="flex flex-col gap-1" :class="expanded ? 'items-stretch' : 'items-center'">
+    <div class="flex flex-col items-stretch gap-1">
       <slot name="top" />
     </div>
 
-    <div
-      class="mt-auto flex flex-col gap-1"
-      :class="expanded ? 'items-stretch' : 'items-center'"
-    >
+    <div class="mt-auto flex flex-col items-stretch gap-1">
       <slot name="bottom" />
     </div>
   </div>

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/_internal/STreeNode.vue

@@ -689,24 +689,30 @@ onBeforeUnmount(() => {
 }
 
 .s-tree-node-wrapper--compact .s-tree-node {
-  min-height: 1.75rem;
+  min-height: var(--s-control-hitbox-xs);
   gap: 0.25rem;
   padding: 0 0.25rem;
 }
 
+.s-tree-node-children {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
 .s-tree-node-wrapper--overlay-actions .s-tree-node {
   position: relative;
   display: grid;
   overflow: hidden;
-  grid-template-columns: minmax(0, 1fr) max-content;
-  gap: 1.25rem;
+  grid-template-columns: minmax(0, 1fr) max-content max-content;
+  column-gap: 1.25rem;
   padding-right: 0.78rem;
 }
 
 .s-tree-node-wrapper--overlay-actions .s-tree-node-right {
   position: relative;
   z-index: var(--s-layer-sticky);
-  grid-column: 2;
+  grid-column: 3;
   justify-content: flex-end;
 }
 

package/src/components/shared/_internal/sidebarGroupContext.ts

@@ -1,4 +1,4 @@
-import type { ComputedRef, InjectionKey } from 'vue';
+import type { ComputedRef, InjectionKey, Ref } from 'vue';
 
 import type { SectionState, SidebarSectionsState } from '../containers/sidebar';
 
@@ -20,9 +20,11 @@ export type SidebarSectionStyle = Readonly<Record<string, string | number>>;
 export interface SidebarGroupContext {
   readonly sectionsState: ComputedRef<SidebarSectionsState>;
   readonly orderedSections: ComputedRef<readonly RegisteredSidebarSection[]>;
+  readonly geometryRevision: Readonly<Ref<number>>;
   registerSection(registration: SidebarSectionRegistration): () => void;
   toggleSection(key: string): void;
   getSectionStyle(key: string): SidebarSectionStyle;
+  getSectionSize(key: string): number;
   beginResize(topKey: string, bottomKey: string): void;
   resizeSections(topKey: string, bottomKey: string, requestedTopSize: number): void;
   finishResize(topKey: string, bottomKey: string): void;

package/src/components/shared/_internal/tabsContext.ts

@@ -35,6 +35,7 @@ export interface STabsContext {
   readonly activeKey: ComputedRef<string | null>
   readonly activationMode: ComputedRef<STabsActivationMode>
   readonly closeButtonMode: ComputedRef<'reserve' | 'overlay'>
+  readonly closeButtonVisibility: ComputedRef<'always' | 'active-hover' | 'hover'>
   readonly tabDensity: ComputedRef<'compact' | 'default' | 'comfortable'>
   readonly registerTab: (registration: STabRegistration) => STabRegistrationKey
   readonly unregisterTab: (key: STabRegistrationKey) => void

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

@@ -45,7 +45,7 @@ export interface Props {
   state?: SAsyncStateContract;
   sectionsState: SidebarSectionsState;
   layout?: 'desktop' | 'mobile';
-  scrollBehavior?: 'auto' | 'body' | 'self';
+  scrollBehavior?: 'auto' | 'body' | 'self' | 'child';
 }
 
 withDefaults(defineProps<Props>(), {
@@ -53,7 +53,7 @@ withDefaults(defineProps<Props>(), {
   icon: undefined,
   state: () => ({ status: 'ready' }),
   layout: 'desktop',
-  scrollBehavior: 'auto',
+  scrollBehavior: 'child',
 });
 
 const emit = defineEmits<SidebarGroupEmits>();

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/containers/SPanel.css

@@ -105,7 +105,7 @@
   pointer-events: none;
 }
 
-.s-panel-content[data-grow='true'] > * {
+.s-panel-content[data-grow='true']:not(.s-panel-content--scroll-child) > * {
   flex-shrink: 0;
 }
 
@@ -121,6 +121,12 @@
   overflow: hidden;
 }
 
+.s-panel-content[data-grow='true'].s-panel-content--scroll-child > :not(.s-panel-scroll-end-spacer) {
+  flex: 1 1 0%;
+  min-height: 0;
+  overflow: hidden;
+}
+
 .s-panel-footer {
   @apply flex min-h-8 min-w-0 flex-wrap items-center border-t border-surface-200 px-3 py-1.5 text-xs text-surface-500;
   @apply dark:border-surface-700 dark:text-surface-400;

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

@@ -65,7 +65,11 @@
         </template>
         <slot />
       </SAsyncState>
-      <div v-if="grow" class="s-panel-scroll-end-spacer" aria-hidden="true"></div>
+      <div
+        v-if="grow && scrollBehavior !== 'child'"
+        class="s-panel-scroll-end-spacer"
+        aria-hidden="true"
+      ></div>
     </div>
     <div v-if="$slots.footer" :id="validatedFooterId" class="s-panel-footer">
       <slot name="footer" />

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

@@ -1,6 +1,7 @@
 @reference "../../../styles/reference.css";
 
 .s-sidebar-group {
+  --s-sidebar-collapsed-section-height: 1.75rem;
   @apply w-full;
   @apply flex flex-col;
   @apply min-h-0;
@@ -9,4 +10,3 @@
 }
 
 /* Этот файл определяет базовый flex-контейнер для группы секций. */
-