@pgcorp/ui-kit 0.1.0

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

@@ -0,0 +1,274 @@
+@reference "../../../styles/reference.css";
+
+.s-button {
+  --s-button-accent: var(--s-button-primary-accent);
+  --s-button-solid-background: var(--s-button-primary-solid-background);
+  --s-button-solid-background-hover: var(--s-button-primary-solid-background-hover);
+  --s-button-solid-background-active: var(--s-button-primary-solid-background-active);
+  --s-button-on-solid: var(--s-button-primary-solid-foreground);
+  --s-button-foreground: var(--s-button-primary-foreground);
+  --s-button-outline: color-mix(in srgb, var(--s-button-accent) 45%, transparent);
+  --s-button-soft-background: color-mix(in srgb, var(--s-button-accent) 12%, transparent);
+  --s-button-hover-background: color-mix(in srgb, var(--s-button-accent) 10%, transparent);
+
+  @apply relative inline-flex min-w-0 items-center justify-center font-semibold;
+  border: 1px solid transparent;
+  border-radius: var(--radius-xs);
+  font-family: inherit;
+  line-height: 1.25;
+  text-decoration: none;
+  appearance: none;
+  touch-action: manipulation;
+  transition:
+    background-color var(--s-motion-standard) ease,
+    border-color var(--s-motion-standard) ease,
+    box-shadow var(--s-motion-standard) ease,
+    color var(--s-motion-standard) ease,
+    transform var(--s-motion-fast) ease;
+}
+
+.s-button[data-size='xs']:not([data-icon-only='true']) {
+  min-height: var(--s-control-hitbox-xs);
+  padding: 0.25rem 0.5rem;
+  font-size: 0.75rem;
+}
+
+.s-button[data-size='sm']:not([data-icon-only='true']) {
+  min-height: var(--s-control-hitbox-sm);
+  padding: 0.375rem 0.625rem;
+  font-size: 0.75rem;
+}
+
+.s-button[data-size='md']:not([data-icon-only='true']) {
+  min-height: var(--s-control-hitbox-md);
+  padding: 0.625rem 1.25rem;
+  font-size: 0.875rem;
+}
+
+.s-button[data-size='lg']:not([data-icon-only='true']) {
+  min-height: var(--s-control-hitbox-lg);
+  padding: 0.875rem 1.75rem;
+  font-size: 1.125rem;
+}
+
+.s-button[data-icon-only='true'] {
+  flex: 0 0 auto;
+  padding: 0;
+}
+
+.s-button[data-icon-only='true'][data-size='xs'] { width: var(--s-control-hitbox-xs); height: var(--s-control-hitbox-xs); }
+.s-button[data-icon-only='true'][data-size='sm'] { width: var(--s-control-hitbox-sm); height: var(--s-control-hitbox-sm); }
+.s-button[data-icon-only='true'][data-size='md'] { width: var(--s-control-hitbox-md); height: var(--s-control-hitbox-md); }
+.s-button[data-icon-only='true'][data-size='lg'] { width: var(--s-control-hitbox-lg); height: var(--s-control-hitbox-lg); }
+
+.s-button[data-severity='secondary'] {
+  --s-button-accent: var(--s-button-secondary-accent);
+  --s-button-solid-background: var(--s-button-secondary-solid-background);
+  --s-button-solid-background-hover: var(--s-button-secondary-solid-background-hover);
+  --s-button-solid-background-active: var(--s-button-secondary-solid-background-active);
+  --s-button-on-solid: var(--s-button-secondary-solid-foreground);
+  --s-button-foreground: var(--s-button-secondary-foreground);
+  --s-button-outline: var(--color-surface-300);
+}
+
+.s-button[data-severity='success'] {
+  --s-button-accent: var(--s-button-success-accent);
+  --s-button-solid-background: var(--s-button-success-solid-background);
+  --s-button-solid-background-hover: var(--s-button-success-solid-background-hover);
+  --s-button-solid-background-active: var(--s-button-success-solid-background-active);
+  --s-button-on-solid: var(--s-button-success-solid-foreground);
+  --s-button-foreground: var(--s-button-success-foreground);
+}
+
+.s-button[data-severity='info'] {
+  --s-button-accent: var(--s-button-info-accent);
+  --s-button-solid-background: var(--s-button-info-solid-background);
+  --s-button-solid-background-hover: var(--s-button-info-solid-background-hover);
+  --s-button-solid-background-active: var(--s-button-info-solid-background-active);
+  --s-button-on-solid: var(--s-button-info-solid-foreground);
+  --s-button-foreground: var(--s-button-info-foreground);
+}
+
+.s-button[data-severity='warn'] {
+  --s-button-accent: var(--s-button-warn-accent);
+  --s-button-solid-background: var(--s-button-warn-solid-background);
+  --s-button-solid-background-hover: var(--s-button-warn-solid-background-hover);
+  --s-button-solid-background-active: var(--s-button-warn-solid-background-active);
+  --s-button-on-solid: var(--s-button-warn-solid-foreground);
+  --s-button-foreground: var(--s-button-warn-foreground);
+}
+
+.s-button[data-severity='danger'] {
+  --s-button-accent: var(--s-button-danger-accent);
+  --s-button-solid-background: var(--s-button-danger-solid-background);
+  --s-button-solid-background-hover: var(--s-button-danger-solid-background-hover);
+  --s-button-solid-background-active: var(--s-button-danger-solid-background-active);
+  --s-button-on-solid: var(--s-button-danger-solid-foreground);
+  --s-button-foreground: var(--s-button-danger-foreground);
+}
+
+.s-button[data-severity='contrast'] {
+  --s-button-accent: var(--s-button-contrast-accent);
+  --s-button-solid-background: var(--s-button-contrast-solid-background);
+  --s-button-solid-background-hover: var(--s-button-contrast-solid-background-hover);
+  --s-button-solid-background-active: var(--s-button-contrast-solid-background-active);
+  --s-button-on-solid: var(--s-button-contrast-solid-foreground);
+  --s-button-foreground: var(--s-button-contrast-foreground);
+  --s-button-outline: var(--color-surface-500);
+}
+
+.s-button[data-appearance='solid'] {
+  border-color: var(--s-button-solid-background);
+  background: var(--s-button-solid-background);
+  box-shadow: var(--s-elevation-control);
+  color: var(--s-button-on-solid);
+}
+
+.s-button[data-appearance='solid']:hover:not(:disabled) {
+  border-color: var(--s-button-solid-background-hover);
+  background: var(--s-button-solid-background-hover);
+}
+
+.s-button[data-appearance='solid']:active:not(:disabled) {
+  border-color: var(--s-button-solid-background-active);
+  background: var(--s-button-solid-background-active);
+}
+
+.s-button[data-appearance='soft'] {
+  background: var(--s-button-soft-background);
+  color: var(--s-button-foreground);
+}
+
+.s-button[data-appearance='soft']:hover:not(:disabled) {
+  background: color-mix(in srgb, var(--s-button-accent) 20%, transparent);
+}
+
+.s-button[data-appearance='outline'] {
+  border-color: var(--s-button-outline);
+  background: transparent;
+  color: var(--s-button-foreground);
+}
+
+.s-button[data-appearance='outline']:hover:not(:disabled),
+.s-button[data-appearance='ghost']:hover:not(:disabled) {
+  background: var(--s-button-hover-background);
+}
+
+.s-button[data-appearance='ghost'],
+.s-button[data-appearance='text'] {
+  background: transparent;
+  box-shadow: none;
+  color: var(--s-button-foreground);
+}
+
+.s-button[data-appearance='text'] {
+  padding-inline: 0.25rem;
+}
+
+.s-button[data-appearance='text']:hover:not(:disabled) {
+  text-decoration: underline;
+}
+
+.s-button:focus-visible {
+  z-index: var(--s-layer-focused-control);
+  outline: var(--s-focus-ring-width) solid var(--s-button-accent);
+  outline-offset: var(--s-focus-ring-offset);
+}
+
+.s-button:active:not(:disabled) {
+  transform: translateY(1px);
+}
+
+.s-button[aria-pressed='true'],
+.s-button[aria-pressed='mixed'] {
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--s-button-accent) 30%, transparent);
+}
+
+.s-button[data-appearance='ghost'][aria-current='page'],
+.s-button[data-appearance='soft'][aria-current='page'] {
+  background: var(--s-button-soft-background);
+  color: var(--s-button-foreground);
+}
+
+.s-button:disabled {
+  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;
+}
+
+.s-button[data-loading='true'] {
+  cursor: wait;
+  opacity: 0.75;
+}
+
+.s-button[data-loading='true'] .s-button__content {
+  opacity: 0;
+}
+
+.s-button__content {
+  @apply inline-flex min-w-0 shrink-0 items-center justify-center;
+  gap: var(--s-space-control-gap);
+}
+
+.s-button[data-width='full'] {
+  display: flex;
+  width: 100%;
+}
+
+.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='between'] .s-button__content { justify-content: space-between; text-align: left; }
+
+.s-button[data-shape='pill'],
+.s-button[data-shape='circle'] { border-radius: var(--s-radius-pill); }
+.s-button[data-shape='square'],
+.s-button[data-shape='row'] { border-radius: var(--radius-xs); }
+.s-button[data-shape='row'] { width: 100%; }
+
+.s-button__label {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.s-button__badge-slot {
+  @apply ml-auto inline-flex;
+}
+
+.s-button__shortcut {
+  @apply ml-auto whitespace-nowrap text-right text-xs leading-4;
+  color: var(--color-surface-400);
+}
+
+:global(.dark) .s-button__shortcut { color: var(--color-surface-500); }
+
+.s-button__icon {
+  width: var(--s-icon-size-xs);
+  height: var(--s-icon-size-xs);
+  flex: 0 0 auto;
+}
+
+.s-button[data-size='lg'] .s-button__icon {
+  width: var(--s-icon-size-sm);
+  height: var(--s-icon-size-sm);
+}
+
+.s-button__loader {
+  @apply absolute inline-flex;
+}
+
+.s-button__disclosure-icon {
+  transition: transform var(--s-motion-fast) ease;
+}
+
+.s-button__disclosure-icon[data-expanded='true'] { transform: rotate(90deg); }
+.s-button__disclosure-icon > svg { width: 100%; height: 100%; }

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

@@ -0,0 +1,211 @@
+<template>
+  <button
+    ref="buttonRef"
+    v-bind="buttonBindings"
+    class="s-button"
+    :data-severity="severity"
+    :data-size="size"
+    :data-width="width"
+    :data-content-align="contentAlign"
+    :data-icon-only="isIconOnly"
+    :data-appearance="appearance"
+    :data-shape="shape"
+    :data-loading="loading || undefined"
+    :aria-pressed="pressed"
+    :aria-busy="busy || loading || undefined"
+    :disabled="disabled || loading"
+    :type="type"
+  >
+    <span v-if="loading" class="s-button__loader" aria-hidden="true">
+      <SProgressIndicator
+        :accessibility="{ mode: 'decorative' }"
+        :size="progressIndicatorSize"
+      />
+    </span>
+    <span class="s-button__content">
+      <span
+        v-if="disclosure?.iconPlacement === 'leading'"
+        class="s-button__disclosure-icon s-button__icon s-button__icon--leading"
+        :data-expanded="disclosure.expanded"
+        data-disclosure-icon
+        aria-hidden="true"
+      ><ChevronRight /></span>
+      <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 />
+      </PassiveContentBoundary>
+      <span v-if="badge !== undefined" class="s-button__badge-slot">
+        <SBadge :severity="badgeSeverity" size="xs">{{ badge }}</SBadge>
+      </span>
+      <span v-if="shortcut" class="s-button__shortcut" aria-hidden="true">{{ shortcut }}</span>
+      <span
+        v-if="disclosure && disclosure.iconPlacement !== 'leading' && disclosure.iconPlacement !== 'none'"
+        class="s-button__disclosure-icon s-button__icon s-button__icon--trailing"
+        :data-expanded="disclosure.expanded"
+        data-disclosure-icon
+        aria-hidden="true"
+      ><ChevronRight /></span>
+      <component :is="trailingIcon" v-else-if="trailingIcon" class="s-button__icon s-button__icon--trailing" aria-hidden="true" />
+    </span>
+  </button>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, watchEffect } from 'vue'
+import type { Component, VNodeChild } from 'vue'
+import { ChevronRight } from '../../icons/sputnigUiIcons'
+import type { InteractiveElementApi } from '../../../internal/interactiveElement'
+import { useOwnedAttrs } from '../../../internal/ownedAttrs'
+import {
+  PassiveContentBoundary,
+  useInteractiveLeafRegistration,
+  type PassiveContentContract,
+} from '../../../internal/passiveContentContract'
+import { useTreeActionRegistration } from '../_internal/treeRuntime'
+import SBadge, { type BadgeSeverity } from '../data-display/SBadge.vue'
+import SProgressIndicator, { type SProgressIndicatorSize } from '../data-display/SProgressIndicator.vue'
+
+defineOptions({ inheritAttrs: false })
+
+export type SButtonSeverity = 'primary' | 'secondary' | 'success' | 'info' | 'warn' | 'danger' | 'contrast'
+export type SButtonSize = 'xs' | 'sm' | 'md' | 'lg'
+export type SButtonWidth = 'auto' | 'fit' | 'full'
+export type SButtonContentAlign = 'center' | 'start' | 'between'
+export type SButtonAppearance = 'solid' | 'soft' | 'outline' | 'ghost' | 'text'
+export type SButtonShape = 'default' | 'pill' | 'square' | 'circle' | 'row'
+export type SButtonNativeType = 'button' | 'reset' | 'submit'
+export interface SButtonDisclosure {
+  expanded: boolean
+  controls: string
+  iconPlacement?: 'leading' | 'trailing' | 'none'
+}
+
+/** Typed native-button ownership surface for composite UI-kit components. / Типизированная ownership-поверхность native button для составных UI-kit-компонентов. */
+export type SButtonApi = InteractiveElementApi<HTMLButtonElement>
+
+export interface Props {
+  label?: string
+  severity?: SButtonSeverity
+  size?: SButtonSize
+  disabled?: boolean
+  loading?: boolean
+  loadingLabel?: string
+  leadingIcon?: Component
+  trailingIcon?: Component
+  badge?: string | number
+  badgeSeverity?: BadgeSeverity
+  shortcut?: string
+  iconOnly?: boolean
+  width?: SButtonWidth
+  contentAlign?: SButtonContentAlign
+  appearance?: SButtonAppearance
+  shape?: SButtonShape
+  pressed?: boolean | 'mixed'
+  busy?: boolean
+  disclosure?: SButtonDisclosure
+  type?: SButtonNativeType
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  label: undefined,
+  severity: 'primary',
+  size: 'md',
+  disabled: false,
+  loading: false,
+  loadingLabel: undefined,
+  leadingIcon: undefined,
+  trailingIcon: undefined,
+  badge: undefined,
+  badgeSeverity: 'secondary',
+  shortcut: undefined,
+  iconOnly: false,
+  width: 'auto',
+  contentAlign: 'center',
+  appearance: 'solid',
+  shape: 'default',
+  pressed: undefined,
+  busy: false,
+  disclosure: undefined,
+  type: 'button',
+})
+const slots = defineSlots<{
+  /** Пассивная метка/графика действия; вложенные controls запрещены. / Passive action label/graphics; nested controls are forbidden. */
+  default?: () => VNodeChild
+}>()
+const buttonRef = ref<HTMLButtonElement | null>(null)
+const ownedAttrs = useOwnedAttrs({ component: 'SButton', owner: 'native button' })
+const isRegisteredTreeAction = useTreeActionRegistration({
+  owner: 'SButton',
+  element: buttonRef,
+  disabled: () => props.disabled || props.loading,
+})
+
+useInteractiveLeafRegistration({ owner: 'SButton' })
+
+const buttonBindings = computed(() => {
+  const bindings = ownedAttrs.bindings()
+  const managedBindings = isRegisteredTreeAction ? { ...bindings, tabindex: -1 } : bindings
+  const semanticBindings = props.disclosure
+    ? {
+        ...managedBindings,
+        'aria-expanded': props.disclosure.expanded,
+        'aria-controls': props.disclosure.controls,
+      }
+    : managedBindings
+  if (!props.loading) return semanticBindings
+
+  const externalAccessibleName = semanticBindings['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) {
+    throw new Error('SButton: loading action requires label, loadingLabel, or aria-label')
+  }
+  return accessibleName
+    ? { ...semanticBindings, 'aria-label': accessibleName }
+    : semanticBindings
+})
+
+const passiveContentContract: PassiveContentContract = {
+  owner: 'SButton',
+  region: 'passive default content',
+  guidance: 'Вынесите независимое действие в соседний SButton. / Move the independent action to a sibling SButton.',
+}
+
+watchEffect(() => {
+  if (props.disclosure && props.disclosure.controls.trim().length === 0) {
+    throw new Error('SButton: disclosure.controls must be a non-empty id')
+  }
+  const placement = props.disclosure?.iconPlacement ?? 'trailing'
+  if (props.disclosure && (
+    (placement === 'leading' && props.leadingIcon)
+    || (placement === 'trailing' && props.trailingIcon)
+  )) {
+    throw new Error(`SButton: disclosure ${placement} icon conflicts with the matching icon prop`)
+  }
+})
+
+const isIconOnly = computed(() => props.iconOnly || (
+  props.label === '' && Boolean(props.leadingIcon || props.trailingIcon || slots.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
+  if (!element) {
+    throw new Error('SButton: native button element is unavailable')
+  }
+  return element
+}
+
+defineExpose<SButtonApi>({
+  getElement,
+  focus: (options?: FocusOptions) => getElement().focus(options),
+})
+
+</script>
+
+<style lang="postcss" src="./SButton.css" scoped></style>

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

@@ -0,0 +1,65 @@
+/*
+  Стили компонента SCheckbox.
+*/
+@reference "../../../styles/reference.css";
+
+.s-checkbox-control {
+  @apply relative inline-flex items-center;
+  width: var(--s-control-indicator-size);
+  height: var(--s-control-indicator-size);
+}
+
+/* Hide the browser's default checkbox */
+.s-checkbox-input {
+  @apply absolute opacity-0 w-0 h-0;
+}
+
+/* The custom checkbox */
+.s-checkbox-box {
+  @apply relative shrink-0 rounded-md border;
+  width: var(--s-control-indicator-size);
+  height: var(--s-control-indicator-size);
+  @apply border-surface-300 dark:border-surface-600;
+  @apply bg-surface-0 dark:bg-surface-900;
+  @apply transition-colors;
+  transition-duration: var(--s-motion-standard);
+  @apply flex items-center justify-center;
+}
+
+/* Hover state */
+.s-checkbox-input:not(:disabled) + .s-checkbox-box {
+  @apply hover:border-primary-500 dark:hover:border-primary-400;
+}
+
+/* Checked state */
+.s-checkbox-input:checked + .s-checkbox-box {
+  @apply border-primary-500 bg-primary-500;
+  @apply dark:border-primary-400 dark:bg-primary-400;
+}
+
+/* Disabled state */
+.s-checkbox-input:disabled + .s-checkbox-box {
+  @apply border-surface-200 bg-surface-100;
+  @apply dark:border-surface-700 dark:bg-surface-800;
+}
+
+/* Checkmark icon */
+.s-checkbox-check {
+  @apply text-white opacity-0 transition-opacity;
+  width: var(--s-icon-size-xs);
+  height: var(--s-icon-size-xs);
+}
+
+.s-checkbox-input:checked + .s-checkbox-box > .s-checkbox-check {
+  @apply opacity-100;
+}
+
+.s-checkbox-input:disabled + .s-checkbox-box > .s-checkbox-check {
+  @apply text-surface-400 dark:text-surface-600;
+}
+
+/* Focus state */
+.s-checkbox-input:focus-visible + .s-checkbox-box {
+  outline: var(--s-focus-ring-width) solid var(--s-focus-ring-strong-color);
+  outline-offset: var(--s-focus-ring-offset);
+}

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

@@ -0,0 +1,130 @@
+<template>
+  <SField
+    :control-id="inputId"
+    :label="label"
+    :required="required"
+    :help-text="helpText"
+    :error-message="errorMessage"
+    :invalid="invalid"
+    :disabled="disabled"
+    :readonly="readonly"
+    layout="inline"
+  >
+    <template #default="field">
+      <span class="s-checkbox-control">
+        <input
+          ref="inputEl"
+          v-bind="ownedAttrs.bindings()"
+          :id="field.controlId"
+          type="checkbox"
+          class="s-checkbox-input"
+          :checked="checkedValue"
+          :disabled="field.disabled"
+          :required="field.required"
+          :aria-invalid="field.invalid || undefined"
+          :aria-readonly="field.readonly || undefined"
+          :aria-describedby="mergeIdReferences(ownedAttrs.string('aria-describedby'), field.describedBy)"
+          @click.stop="onClick"
+          @change="onChange"
+        />
+        <span class="s-checkbox-box">
+          <component
+            :is="indeterminate ? Minus : Check"
+            class="s-checkbox-check"
+            aria-hidden="true"
+            :data-sputnig-ui-icon="indeterminate ? 'minus' : 'check'"
+            data-sputnig-ui-icon-color-mode="auto"
+            data-sputnig-ui-icon-set="classic"
+          />
+        </span>
+      </span>
+    </template>
+  </SField>
+</template>
+
+<script setup lang="ts">
+import { computed, onMounted, ref, useId, watch } from 'vue'
+import { Check, Minus } from '../../icons/sputnigUiIcons'
+import { mergeIdReferences, useOwnedAttrs } from '../../../internal/ownedAttrs'
+import { useInteractiveLeafRegistration } from '../../../internal/passiveContentContract'
+import { resolveOptionalDomId } from '../../../internal/runtimeContract'
+import SField from './SField.vue'
+
+defineOptions({ inheritAttrs: false })
+
+export interface Props {
+  modelValue: boolean
+  label?: string
+  disabled?: boolean
+  readonly?: boolean
+  required?: boolean
+  invalid?: boolean
+  helpText?: string
+  errorMessage?: string
+  id?: string
+  indeterminate?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  label: undefined,
+  disabled: false,
+  readonly: false,
+  required: false,
+  invalid: false,
+  helpText: undefined,
+  errorMessage: undefined,
+  id: undefined,
+  indeterminate: false,
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [value: boolean]
+  click: [event: MouseEvent]
+}>()
+const ownedAttrs = useOwnedAttrs({ component: 'SCheckbox', owner: 'native checkbox input' })
+useInteractiveLeafRegistration({ owner: 'SCheckbox' })
+
+const generatedInputId = useId()
+const inputId = computed(() => resolveOptionalDomId(
+  'SCheckbox',
+  'id',
+  props.id,
+  `s-checkbox-${generatedInputId}`,
+))
+const inputEl = ref<HTMLInputElement | null>(null)
+
+const checkedValue = computed(() => {
+  if (typeof props.modelValue !== 'boolean') {
+    throw new TypeError('SCheckbox: modelValue must be boolean')
+  }
+  return props.modelValue
+})
+
+function applyIndeterminate(): void {
+  if (inputEl.value) {
+    inputEl.value.indeterminate = props.indeterminate && !checkedValue.value
+  }
+}
+
+onMounted(applyIndeterminate)
+watch([() => props.indeterminate, checkedValue], applyIndeterminate)
+
+function onChange(event: Event): void {
+  if (props.readonly) return
+  const target = event.currentTarget
+  if (!(target instanceof HTMLInputElement)) {
+    throw new TypeError('SCheckbox: change event owner must be the native checkbox input')
+  }
+  emit('update:modelValue', target.checked)
+}
+
+function onClick(event: MouseEvent): void {
+  if (props.readonly) {
+    event.preventDefault()
+    return
+  }
+  emit('click', event)
+}
+</script>
+
+<style lang="postcss" src="./SCheckbox.css" scoped></style>