@pgcorp/ui-kit 0.2.0 → 0.3.1

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/docs/public-api.md

@@ -18,6 +18,10 @@
 
 Компонентный contract выражается через typed props, slots, events и exposed
 methods. Внутренний DOM, CSS-классы и private modules не являются API.
+Публичные source-SFC объявляют runtime props и events локально: consumer Vue
+compiler регистрирует их без межфайлового filesystem type resolver.
+Публикуемый production-source компилируется с `target/lib: ES2020`, совпадающим
+с baseline `@vue/tsconfig/tsconfig.dom.json`, и не требует скрытых полифиллов.
 
 ## English
 
@@ -37,3 +41,7 @@ Primary groups:
 
 Component contracts are expressed through typed props, slots, events, and exposed
 methods. Internal DOM, CSS classes, and private modules are not API.
+Public source SFCs declare runtime props and events locally, so the consumer Vue
+compiler registers them without a cross-file filesystem type resolver.
+Published production source compiles with the `target/lib: ES2020` baseline from
+`@vue/tsconfig/tsconfig.dom.json` and does not require implicit polyfills.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pgcorp/ui-kit",
-  "version": "0.2.0",
+  "version": "0.3.1",
   "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/SAppShell.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { computed, getCurrentInstance, useSlots } from 'vue'
 import type { RouteLocationRaw } from 'vue-router'
+import { hasOwn } from '../../internal/es2020'
 import { useOwnedAttrs } from '../../internal/ownedAttrs'
 import { validateNonEmptyString } from '../../internal/runtimeContract'
 import SBadge from '../shared/data-display/SBadge.vue'
@@ -98,8 +99,8 @@ function toKebabCase(value: string): string {
 function hasExplicitProp(propName: string): boolean {
   const vnodeProps = componentInstance.vnode.props
   return vnodeProps !== null && (
-    Object.hasOwn(vnodeProps, propName)
-    || Object.hasOwn(vnodeProps, toKebabCase(propName))
+    hasOwn(vnodeProps, propName)
+    || hasOwn(vnodeProps, toKebabCase(propName))
   )
 }
 

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/complex/STree.vue

@@ -32,8 +32,36 @@
   </ul>
 </template>
 
+<script lang="ts">
+import type {
+  SelectionKey,
+  TreeActionsLayout,
+  TreeDensity,
+  TreeExpandControl,
+  TreeModel,
+  TreeRowVariant,
+  TreeSelection,
+  TreeSelectionRail,
+} from './types'
+
+/** Публичный контракт дерева принадлежит source-SFC runtime. / The public tree contract is owned by the source-SFC runtime. */
+export interface STreeProps<T extends object, K extends SelectionKey = SelectionKey> {
+  nodes: readonly T[]
+  model: TreeModel<T, K>
+  label: string
+  selection: TreeSelection<K>
+  expanded?: ReadonlySet<K>
+  density?: TreeDensity
+  actionsLayout?: TreeActionsLayout
+  expandControl?: TreeExpandControl
+  selectionRail?: TreeSelectionRail
+  rowVariant?: TreeRowVariant
+}
+</script>
+
 <script setup lang="ts" generic="T extends object, K extends SelectionKey">
 import { computed, nextTick, provide, ref, watch } from 'vue'
+import { lastItem } from '../../../internal/es2020'
 import { useOwnedAttrs } from '../../../internal/ownedAttrs'
 import { assertSelectionKey, selectionKeyToken } from '../_internal/useSelectionRoving'
 import STreeNode from '../_internal/STreeNode.vue'
@@ -46,12 +74,9 @@ import {
 import { validateTreeModel } from './treeAdapter'
 import type {
   STreeNodeContentScope,
-  STreeProps,
-  SelectionKey,
   TreeActivationOrigin,
   TreeNodeActivationEvent,
   TreeNodeEvent,
-  TreeSelection,
 } from './types'
 
 defineOptions({ inheritAttrs: false })
@@ -172,7 +197,7 @@ function handleTreeItemKeydown(item: RegisteredTreeItem<T, K>, event: KeyboardEv
   }
   if (event.key === 'End') {
     event.preventDefault()
-    void focusItem(items.at(-1))
+    void focusItem(lastItem(items))
     return
   }
   if (event.key === 'ArrowRight' && item.hasChildren()) {

package/src/components/shared/complex/treeAdapter.ts

@@ -5,6 +5,7 @@ import {
   type SelectionIdentity,
   type SelectionKey,
 } from '../_internal/useSelectionRoving'
+import { withErrorCause } from '../../../internal/es2020'
 import type { TreeModel } from './types'
 
 export interface FlatTreeAdapter<T extends object, K extends SelectionKey> {
@@ -130,7 +131,7 @@ function readModelValue<R>(
   try {
     return reader()
   } catch (error) {
-    throw new TypeError(`STree: model.${field} failed at ${coordinate}`, { cause: error })
+    throw withErrorCause(new TypeError(`STree: model.${field} failed at ${coordinate}`), error)
   }
 }
 

package/src/components/shared/complex/types.ts

@@ -51,18 +51,7 @@ export type TreeExpandControl = 'button' | 'row'
 export type TreeSelectionRail = 'hidden' | 'visible'
 export type TreeRowVariant = 'default' | 'table'
 
-export interface STreeProps<T extends object, K extends SelectionKey = SelectionKey> {
-  nodes: readonly T[]
-  model: TreeModel<T, K>
-  label: string
-  selection: TreeSelection<K>
-  expanded?: ReadonlySet<K>
-  density?: TreeDensity
-  actionsLayout?: TreeActionsLayout
-  expandControl?: TreeExpandControl
-  selectionRail?: TreeSelectionRail
-  rowVariant?: TreeRowVariant
-}
+export type { STreeProps } from './STree.vue'
 
 export interface TreeNodeEvent<T extends object, K extends SelectionKey = SelectionKey> {
   node: T

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

@@ -33,7 +33,7 @@ import { type FunctionalComponent, type HTMLAttributes, type VNodeProps } from '
 import SPanel from './SPanel.vue';
 import SSidebarGroup from './SSidebarGroup.vue';
 import type { SAsyncStateContract } from '../feedback/SAsyncState.vue';
-import type { SidebarGroupEmits, SidebarSectionsState } from './sidebar';
+import type { SidebarSectionsState } from './sidebar';
 import { useOwnedAttrs } from '../../../internal/ownedAttrs';
 
 defineOptions({ inheritAttrs: false });
@@ -48,6 +48,11 @@ export interface Props {
   scrollBehavior?: 'auto' | 'body' | 'self' | 'child';
 }
 
+interface Emits {
+  'update-sections': [state: SidebarSectionsState];
+  'toggle-section': [key: string];
+}
+
 withDefaults(defineProps<Props>(), {
   title: undefined,
   icon: undefined,
@@ -56,7 +61,7 @@ withDefaults(defineProps<Props>(), {
   scrollBehavior: 'child',
 });
 
-const emit = defineEmits<SidebarGroupEmits>();
+const emit = defineEmits<Emits>();
 const ownedAttrs = useOwnedAttrs({ component: 'SLeftSidebar', owner: 'left-sidebar root' });
 </script>
 

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/SPopover.vue

@@ -93,6 +93,7 @@ import SButton, {
 } from '../controls/SButton.vue';
 import { useFloatingPosition, type FloatingPlacement } from '../../../composables/useFloatingPosition';
 import { findRelativeTabTarget, getFocusableElements } from '../../../internal/focusNavigation';
+import { lastItem } from '../../../internal/es2020';
 import { resolveInteractiveElement } from '../../../internal/interactiveElement';
 import { registerLayer, type LayerRegistration } from '../../../internal/layerStack';
 import { useOwnedAttrs } from '../../../internal/ownedAttrs';
@@ -495,7 +496,7 @@ function handlePanelTab(event: KeyboardEvent): void {
   const focusable = getFocusableElements(panel);
   const active = document.activeElement;
   const first = focusable[0];
-  const last = focusable.at(-1);
+  const last = lastItem(focusable);
   const leavesPanel = focusable.length === 0
     || (event.shiftKey ? active === panel || active === first : active === last);
   if (!leavesPanel) return;

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

@@ -16,6 +16,7 @@ import {
 } from 'vue';
 
 import { useOwnedAttrs } from '../../../internal/ownedAttrs';
+import { hasOwn, lastItem } from '../../../internal/es2020';
 import {
   sidebarGroupContextKey,
   type RegisteredSidebarSection,
@@ -27,7 +28,6 @@ import {
   createSidebarSectionsTransition,
   sidebarSectionsStateEqual,
   type SectionState,
-  type SidebarGroupEmits,
   type SidebarSectionReplacement,
   type SidebarSectionsState,
 } from './sidebar';
@@ -38,7 +38,12 @@ const props = defineProps<{
   sectionsState: SidebarSectionsState;
 }>();
 
-const emit = defineEmits<SidebarGroupEmits>();
+interface Emits {
+  'update-sections': [state: SidebarSectionsState];
+  'toggle-section': [key: string];
+}
+
+const emit = defineEmits<Emits>();
 
 const ownedAttrs = useOwnedAttrs({ component: 'SSidebarGroup', owner: 'sidebar group root' });
 const groupRef = ref<HTMLDivElement | null>(null);
@@ -147,7 +152,7 @@ function fitOpenSectionSizes(
 
   let delta = targetSize - [...sizes.values()].reduce((sum, size) => sum + size, 0);
   if (delta > 0) {
-    const growTarget = flexible ?? openSections.at(-1);
+    const growTarget = flexible ?? lastItem(openSections);
     if (growTarget) sizes.set(growTarget.key, sizes.get(growTarget.key)! + delta);
     delta = 0;
   }
@@ -200,7 +205,7 @@ function registerSection(registration: SidebarSectionRegistration): () => void {
   if (!(registration.element instanceof HTMLElement)) {
     throw new TypeError('SSidebarGroup: registered section element must be an HTMLElement');
   }
-  if (!Object.hasOwn(currentState(), registration.key)) {
+  if (!hasOwn(currentState(), registration.key)) {
     throw new Error(`SSidebarGroup: registered section '${registration.key}' has no controlled state`);
   }
   if (registrations.value.some((current) => current.key === registration.key)) {
@@ -371,7 +376,7 @@ function resizeSections(topKey: string, bottomKey: string, requestedTopSize: num
   );
   const delta = requestedTopSize - currentUpperSize;
   const shrinking = delta > 0 ? [...lower] : [...upper].reverse();
-  const growing = delta > 0 ? upper.at(-1) : lower[0];
+  const growing = delta > 0 ? lastItem(upper) : lower[0];
   let transferable = Math.abs(delta);
   transferable = Math.min(
     transferable,

package/src/components/shared/containers/sidebar.ts

@@ -163,7 +163,7 @@ export function createSidebarSectionsTransition(
     if (typeof replacement.key !== 'string' || replacement.key.trim().length === 0) {
       throw new TypeError(`SSidebarGroup: replacements[${index}].key must be a non-empty string`);
     }
-    if (!Object.hasOwn(current, replacement.key)) {
+    if (!hasOwn(current, replacement.key)) {
       throw new Error(`SSidebarGroup: cannot replace unknown section '${replacement.key}'`);
     }
     if (replacementsByKey.has(replacement.key)) {
@@ -204,3 +204,4 @@ export function sidebarSectionsStateEqual(
       && leftSection.minSize === rightSection.minSize;
   });
 }
+import { hasOwn } from '../../../internal/es2020';

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'],