@pgcorp/ui-kit 0.1.2 → 0.3.0

package/src/components/shared/navigation/STabs.vue

@@ -11,6 +11,7 @@
     :data-list-width="tabListWidth"
     :data-tone="tone"
     :data-close-mode="closeButtonMode"
+    :data-close-visibility="closeButtonVisibility"
     :data-radius="surfaceRadius"
     :data-surface="surface"
     :data-has-panels="composition === 'custom' ? 'custom' : ($slots.panels ? 'true' : 'false')"
@@ -121,6 +122,8 @@ export interface Props {
   tabDensity?: 'compact' | 'default' | 'comfortable'
   /** Резервирует или перекрывает место sibling close action. / Reserves or overlays sibling close-action space. */
   closeButtonMode?: 'reserve' | 'overlay'
+  /** Видимость sibling close/action region. / Visibility policy for the sibling close/action region. */
+  closeButtonVisibility?: 'always' | 'active-hover' | 'hover'
   /** Скругление owner surface. / Radius of the owner surface. */
   surfaceRadius?: 'default' | 'none'
   /** Фон owner surface. / Background of the owner surface. */
@@ -156,6 +159,7 @@ const props = withDefaults(defineProps<Props>(), {
   tabListWidth: 'auto',
   tabDensity: 'default',
   closeButtonMode: 'reserve',
+  closeButtonVisibility: 'always',
   surfaceRadius: 'default',
   surface: 'default',
 })
@@ -236,6 +240,7 @@ const activeKey = computed<string | null>(() => (
 ))
 const activationMode = computed(() => props.activationMode)
 const closeMode = computed(() => props.closeButtonMode)
+const closeVisibility = computed(() => props.closeButtonVisibility)
 const density = computed(() => props.tabDensity)
 
 function identityIds(tabKey: string): { tabId: string; panelId: string } {
@@ -456,6 +461,7 @@ const context: STabsContext = {
   activeKey,
   activationMode,
   closeButtonMode: closeMode,
+  closeButtonVisibility: closeVisibility,
   tabDensity: density,
   registerTab,
   unregisterTab,
@@ -522,7 +528,7 @@ defineExpose({
   --s-tab-base-padding-inline: 1rem;
   --s-tab-padding-inline: var(--s-tab-base-padding-inline);
   --s-tab-padding-block: 0;
-  --s-tab-content-offset-y: 2px;
+  --s-tab-content-offset-y: 0;
   --s-tab-trigger-min-height: var(--s-control-hitbox-sm);
   --s-tab-indicator-width: 2px;
   --s-tab-radius: 0.375rem 0.375rem 0 0;
@@ -575,7 +581,7 @@ defineExpose({
 
 .s-tabs[data-density='compact'] { --s-tab-row-height: 2rem; --s-tab-base-padding-inline: 0.5rem; }
 .s-tabs[data-density='comfortable'] { --s-tab-row-height: 3rem; --s-tab-base-padding-inline: 1.125rem; }
-.s-tabs[data-sizing='content'] { --s-tab-min-width: 7rem; --s-tab-max-width: none; }
+.s-tabs[data-sizing='content'] { --s-tab-min-width: 0; --s-tab-max-width: 15rem; }
 .s-tabs[data-sizing='compact'] { --s-tab-max-width: 10.5rem; }
 .s-tabs[data-sizing='wide'] { --s-tab-max-width: 20rem; }
 .s-tabs[data-sizing='equal'] {

package/src/internal/codeEditorContract.ts

@@ -5,7 +5,7 @@ import {
   validateNonEmptyString,
 } from './runtimeContract'
 
-export const CODE_EDITOR_VIEWPORTS = ['content', 'compact', 'standard', 'expanded', 'fill'] as const
+export const CODE_EDITOR_VIEWPORTS = ['content', 'document', 'compact', 'standard', 'expanded', 'fill'] as const
 export const CODE_EDITOR_VARIANTS = ['code', 'sql'] as const
 export const CODE_EDITOR_KEY_BEHAVIORS = ['indent', 'focus-next'] as const
 export const CODE_EDITOR_CURSOR_ACTIVITY_MODES = ['editable', 'always'] as const

package/src/internal/ownedAttrs.ts

@@ -126,6 +126,13 @@ export const ownedAttributeSchemas = Object.freeze({
     onPointerdown: 'listener',
     tabindex: 'string-or-number',
   }),
+  SSwitch: defineOwnedAttributeSchema({
+    'aria-label': 'string',
+    'aria-describedby': 'string',
+    onClick: 'listener',
+    onPointerdown: 'listener',
+    tabindex: 'string-or-number',
+  }),
   SCheckboxGroup: defineOwnedAttributeSchema({
     'aria-describedby': 'string',
     'data-testid': 'data',
@@ -137,6 +144,10 @@ export const ownedAttributeSchemas = Object.freeze({
   SColorSelect: defineOwnedAttributeSchema({
     'aria-label': 'string',
   }),
+  SCombobox: defineOwnedAttributeSchema({
+    'aria-describedby': 'string',
+    'aria-label': 'string',
+  }),
   SDragHandle: defineOwnedAttributeSchema({
     'data-testid': 'data',
   }),
@@ -158,7 +169,12 @@ export const ownedAttributeSchemas = Object.freeze({
     title: 'string',
   }),
   SInputText: defineOwnedAttributeSchema({
+    'aria-activedescendant': 'string',
+    'aria-autocomplete': 'string',
+    'aria-controls': 'string',
     'aria-describedby': 'string',
+    'aria-expanded': 'aria-boolean',
+    'aria-haspopup': 'aria-haspopup',
     'aria-invalid': 'aria-boolean',
     'aria-label': 'string',
     'data-testid': 'data',
@@ -168,13 +184,22 @@ export const ownedAttributeSchemas = Object.freeze({
     max: 'string-or-number',
     min: 'string-or-number',
     onBlur: 'listener',
+    onClick: 'listener',
     onFocus: 'listener',
     onKeydown: 'listener',
     onKeyup: 'listener',
     pattern: 'string',
+    role: 'string',
     step: 'string-or-number',
     title: 'string',
   }),
+  SRange: defineOwnedAttributeSchema({
+    'aria-describedby': 'string',
+    'aria-label': 'string',
+    'data-testid': 'data',
+    onBlur: 'listener',
+    onFocus: 'listener',
+  }),
   SInlineTokenEditor: defineOwnedAttributeSchema({
     'aria-describedby': 'string',
     'aria-label': 'string',
@@ -230,6 +255,10 @@ export const ownedAttributeSchemas = Object.freeze({
     'data-testid': 'data',
     title: 'string',
   }),
+  SChip: defineOwnedAttributeSchema({
+    'aria-label': 'string',
+    title: 'string',
+  }),
   SCodeBlock: defineOwnedAttributeSchema({
     'aria-label': 'string',
     'data-testid': 'data',
@@ -331,7 +360,7 @@ type OwnedAttributeValue<Name extends string, Kind extends OwnedAttributeValueKi
 
 export type OwnedAttributeBindings<Component extends OwnedAttributeComponent> = Readonly<Partial<{
   [Name in OwnedAttributeName<Component>]: OwnedAttributeValue<Name, OwnedAttributeKind<Component, Name>>
-}>>
+}> & Partial<Record<`data-${string}`, string | number | boolean>>>
 
 export interface OwnedAttrsOptions<Component extends OwnedAttributeComponent> {
   /** Имя public-компонента для диагностики контракта. / Public component name used in contract diagnostics. */
@@ -413,7 +442,7 @@ export function useOwnedAttrs<Component extends OwnedAttributeComponent>(
           `raw "${name}" запрещён; атрибут "${name}" не объявлен в exact owned-attrs schema; используйте типизированные props/tokens UI-kit или consumer layout wrapper. Raw "${name}" is forbidden and is not declared by the exact owned-attrs schema; use typed UI-kit props/tokens or a consumer layout wrapper`,
         )
       }
-      const kind = schema[name]
+      const kind = schema[name] ?? (name.startsWith('data-') && name.length > 5 ? 'data' : undefined)
       if (!kind) {
         throw attributeBoundaryError(
           options.component,