@pgcorp/ui-kit 0.1.0

package/src/components/shared/_internal/SDisclosureSummary.css

@@ -0,0 +1,92 @@
+@reference "../../../styles/reference.css";
+
+.s-disclosure-summary {
+  @apply flex min-w-0 flex-1 items-center gap-1.5 text-left;
+}
+
+.s-disclosure-summary__title {
+  @apply min-w-0 truncate;
+}
+
+.s-disclosure-summary[data-summary-typography='default'] .s-disclosure-summary__title {
+  @apply font-medium;
+}
+
+.s-disclosure-summary[data-summary-typography='strong'] .s-disclosure-summary__title {
+  @apply font-semibold;
+}
+
+.s-disclosure-summary[data-summary-typography='mono'] .s-disclosure-summary__title {
+  @apply font-mono font-medium;
+}
+
+.s-disclosure-summary[data-summary-case='uppercase'] .s-disclosure-summary__title {
+  @apply uppercase tracking-wider;
+}
+
+.s-disclosure-summary__state {
+  @apply inline-flex shrink-0 items-center justify-center;
+  width: var(--s-icon-size-xs);
+  height: var(--s-icon-size-xs);
+}
+
+.s-disclosure-summary__state[data-summary-state-tone='neutral'] {
+  @apply text-surface-500 dark:text-surface-400;
+}
+
+.s-disclosure-summary__state[data-summary-state-tone='info'] {
+  @apply text-info-600 dark:text-info-300;
+}
+
+.s-disclosure-summary__state[data-summary-state-tone='success'] {
+  @apply text-success-600 dark:text-success-300;
+}
+
+.s-disclosure-summary__state[data-summary-state-tone='warn'] {
+  @apply text-warn-600 dark:text-warn-300;
+}
+
+.s-disclosure-summary__state[data-summary-state-tone='danger'] {
+  @apply text-danger-600 dark:text-danger-300;
+}
+
+.s-disclosure-summary__state-icon {
+  @apply h-full w-full;
+}
+
+.s-disclosure-summary__facts,
+.s-disclosure-summary__badges {
+  @apply flex min-w-0 shrink items-center gap-1 overflow-hidden;
+}
+
+.s-disclosure-summary__fact {
+  @apply inline-flex min-w-0 max-w-32 shrink items-center gap-1 rounded border border-surface-200 bg-surface-50 px-1 text-[10px] font-medium leading-4 text-surface-600 dark:border-surface-700 dark:bg-surface-900 dark:text-surface-300;
+}
+
+.s-disclosure-summary__fact[data-summary-fact-tone='info'] {
+  @apply border-info-200 bg-info-50 text-info-700 dark:border-info-800 dark:bg-info-950 dark:text-info-300;
+}
+
+.s-disclosure-summary__fact[data-summary-fact-tone='success'] {
+  @apply border-success-200 bg-success-50 text-success-700 dark:border-success-800 dark:bg-success-950 dark:text-success-300;
+}
+
+.s-disclosure-summary__fact[data-summary-fact-tone='warn'] {
+  @apply border-warn-200 bg-warn-50 text-warn-700 dark:border-warn-800 dark:bg-warn-950 dark:text-warn-300;
+}
+
+.s-disclosure-summary__fact[data-summary-fact-tone='danger'] {
+  @apply border-danger-200 bg-danger-50 text-danger-700 dark:border-danger-800 dark:bg-danger-950 dark:text-danger-300;
+}
+
+.s-disclosure-summary__fact-label {
+  @apply shrink-0 text-surface-500 dark:text-surface-400;
+}
+
+.s-disclosure-summary__fact-value {
+  @apply min-w-0 truncate;
+}
+
+.s-disclosure-summary__status {
+  @apply ml-auto shrink-0;
+}

package/src/components/shared/_internal/SDisclosureSummary.vue

@@ -0,0 +1,121 @@
+<template>
+  <span
+    class="s-disclosure-summary"
+    :data-summary-typography="typography"
+    :data-summary-case="casing"
+  >
+    <span
+      v-if="statePresentation"
+      class="s-disclosure-summary__state"
+      :data-summary-state="state"
+      :data-summary-state-tone="statePresentation.tone"
+      aria-hidden="true"
+    >
+      <SProgressIndicator
+        v-if="state === 'progress'"
+        :accessibility="{ mode: 'decorative' }"
+        size="xs"
+        tone="info"
+      />
+      <component v-else :is="statePresentation.icon" class="s-disclosure-summary__state-icon" />
+    </span>
+    <span class="s-disclosure-summary__title">{{ title }}</span>
+    <span v-if="facts.length > 0" class="s-disclosure-summary__facts">
+      <span
+        v-for="fact in facts"
+        :key="fact.id"
+        class="s-disclosure-summary__fact"
+        :data-summary-fact-tone="fact.tone ?? 'neutral'"
+      >
+        <span v-if="fact.label" class="s-disclosure-summary__fact-label">{{ fact.label }}</span>
+        <span class="s-disclosure-summary__fact-value">{{ fact.value }}</span>
+      </span>
+    </span>
+    <span v-if="badges.length > 0" class="s-disclosure-summary__badges">
+      <SBadge
+        v-for="badge in badges"
+        :key="badge.id"
+        :severity="badge.severity ?? 'secondary'"
+        size="xs"
+        :title="badge.title"
+      >
+        {{ badge.label }}
+      </SBadge>
+    </span>
+    <span v-if="status" class="s-disclosure-summary__status">
+      <SStatus
+        :label="status.label"
+        :tone="status.tone ?? 'neutral'"
+        :title="status.title"
+        :icon="null"
+        size="xs"
+      />
+    </span>
+  </span>
+</template>
+
+<script setup lang="ts">
+import { computed, watchEffect } from 'vue'
+
+import { resolveFeedbackIndicator } from '../../../internal/feedbackPresentation'
+import { validateNonEmptyString } from '../../../internal/runtimeContract'
+import SBadge from '../data-display/SBadge.vue'
+import SProgressIndicator from '../data-display/SProgressIndicator.vue'
+import SStatus from '../data-display/SStatus.vue'
+import type {
+  SDisclosureSummaryBadge,
+  SDisclosureSummaryCase,
+  SDisclosureSummaryFact,
+  SDisclosureSummaryState,
+  SDisclosureSummaryStatus,
+  SDisclosureSummaryTypography,
+} from '../containers/disclosureSummary'
+
+const props = withDefaults(defineProps<{
+  title: string
+  typography?: SDisclosureSummaryTypography
+  casing?: SDisclosureSummaryCase
+  state?: SDisclosureSummaryState
+  facts?: readonly SDisclosureSummaryFact[]
+  badges?: readonly SDisclosureSummaryBadge[]
+  status?: SDisclosureSummaryStatus
+}>(), {
+  typography: 'default',
+  casing: 'sentence',
+  state: undefined,
+  facts: () => [],
+  badges: () => [],
+  status: undefined,
+})
+
+const statePresentation = computed(() => props.state ? resolveFeedbackIndicator(props.state) : null)
+
+watchEffect(() => {
+  if (props.title.trim().length === 0) {
+    throw new Error('SDisclosureSummary: title must be a non-empty string')
+  }
+  const factIds = new Set<string>()
+  props.facts.forEach((fact, index) => {
+    const id = validateNonEmptyString('SDisclosureSummary', `facts[${index}].id`, fact.id)
+    if (factIds.has(id)) throw new Error(`SDisclosureSummary: duplicate facts id "${id}"`)
+    factIds.add(id)
+    if (String(fact.value).trim().length === 0) {
+      throw new Error(`SDisclosureSummary: facts[${index}].value must be non-empty`)
+    }
+  })
+  const badgeIds = new Set<string>()
+  props.badges.forEach((badge, index) => {
+    const id = validateNonEmptyString('SDisclosureSummary', `badges[${index}].id`, badge.id)
+    if (badgeIds.has(id)) throw new Error(`SDisclosureSummary: duplicate badges id "${id}"`)
+    badgeIds.add(id)
+    if (String(badge.label).trim().length === 0) {
+      throw new Error(`SDisclosureSummary: badges[${index}].label must be non-empty`)
+    }
+  })
+  if (props.status && props.status.label.trim().length === 0) {
+    throw new Error('SDisclosureSummary: status.label must be a non-empty string')
+  }
+})
+</script>
+
+<style lang="postcss" src="./SDisclosureSummary.css" scoped></style>

package/src/components/shared/_internal/SListboxGroup.css

@@ -0,0 +1,18 @@
+@reference "../../../styles/reference.css";
+
+.s-listbox-group,
+.s-listbox-group__options {
+  @apply m-0 list-none p-0;
+}
+
+.s-listbox-group__label {
+  @apply block cursor-default px-3 py-2 text-xs font-bold uppercase tracking-wider text-surface-500 dark:text-surface-400;
+}
+
+.s-listbox-group[data-variant='color'] {
+  grid-column: 1 / -1;
+}
+
+.s-listbox-group[data-variant='color'] .s-listbox-group__options {
+  @apply grid grid-cols-5 gap-2;
+}

package/src/components/shared/_internal/SListboxGroup.vue

@@ -0,0 +1,24 @@
+<template>
+  <li class="s-listbox-group" :data-variant="variant" role="group" :aria-labelledby="labelId">
+    <span :id="labelId" class="s-listbox-group__label">
+      {{ label }}
+    </span>
+    <ul class="s-listbox-group__options" role="presentation">
+      <slot />
+    </ul>
+  </li>
+</template>
+
+<script setup lang="ts">
+export interface Props {
+  label: string
+  labelId: string
+  variant?: 'select' | 'color'
+}
+
+withDefaults(defineProps<Props>(), {
+  variant: 'select',
+})
+</script>
+
+<style lang="postcss" src="./SListboxGroup.css" scoped></style>

package/src/components/shared/_internal/SMenuItem.css

@@ -0,0 +1,112 @@
+@reference "../../../styles/reference.css";
+
+.s-menu-item {
+  @apply flex w-full min-w-0 items-center text-left font-medium;
+  min-height: var(--s-density-row-default);
+  gap: var(--s-space-control-gap);
+  padding: var(--s-menu-item-block-padding) var(--s-menu-item-inline-padding);
+  border: 0;
+  border-radius: var(--radius-xs);
+  background: transparent;
+  color: var(--s-menu-item-foreground);
+  font-family: inherit;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  appearance: none;
+  cursor: pointer;
+  transition:
+    background-color var(--s-motion-fast) ease,
+    color var(--s-motion-fast) ease;
+}
+
+.s-menu-item[data-density='compact'] {
+  min-height: var(--s-density-row-compact);
+  padding: var(--s-menu-item-block-padding-compact) var(--s-menu-item-inline-padding-compact);
+  font-size: 0.75rem;
+  line-height: 1rem;
+}
+
+.s-menu-item:hover:not([aria-disabled='true']),
+.s-menu-item:focus-visible,
+.s-menu-item[data-current='true'] {
+  background: var(--s-menu-item-state-background);
+  color: var(--s-menu-item-state-foreground);
+}
+
+.s-menu-item:focus-visible {
+  outline: var(--s-focus-ring-width) solid var(--s-focus-ring-color);
+  outline-offset: var(--s-focus-ring-inset-offset);
+}
+
+.s-menu-item[aria-disabled='true'] {
+  color: var(--s-menu-item-disabled-foreground);
+  cursor: not-allowed;
+  opacity: 0.62;
+}
+
+.s-menu-item__main {
+  @apply flex min-w-0 items-center;
+  gap: var(--s-space-control-gap);
+}
+
+.s-menu-item__state {
+  display: inline-flex;
+  flex: 0 0 var(--s-icon-size-xs);
+  align-items: center;
+  justify-content: center;
+}
+
+.s-menu-item__state:empty {
+  display: none;
+}
+
+.s-menu-item__icon,
+.s-menu-item__state-icon,
+.s-menu-item__submenu-icon {
+  flex: 0 0 auto;
+  width: var(--s-icon-size-xs);
+  height: var(--s-icon-size-xs);
+}
+
+.s-menu-item__state-icon,
+.s-menu-item__radio-dot {
+  color: var(--s-menu-item-indicator-foreground);
+}
+
+.s-menu-item__radio-dot {
+  width: calc(var(--s-icon-size-xs) / 2);
+  height: calc(var(--s-icon-size-xs) / 2);
+  border-radius: var(--s-radius-pill);
+  background: currentColor;
+}
+
+.s-menu-item__label {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.s-menu-item__meta {
+  @apply ml-auto inline-flex shrink-0 items-center;
+  gap: var(--s-space-control-gap);
+}
+
+.s-menu-item__badge {
+  @apply inline-flex;
+}
+
+.s-menu-item__shortcut {
+  @apply whitespace-nowrap text-right text-xs leading-4;
+  color: var(--s-menu-item-secondary-foreground);
+}
+
+.s-menu-item:hover:not([aria-disabled='true']) .s-menu-item__shortcut,
+.s-menu-item:focus-visible .s-menu-item__shortcut,
+.s-menu-item[data-current='true'] .s-menu-item__shortcut {
+  color: var(--s-menu-item-state-foreground);
+}
+
+.s-menu-item[data-layout='tile'] {
+  min-width: 5rem;
+}

package/src/components/shared/_internal/SMenuItem.vue

@@ -0,0 +1,213 @@
+<template>
+  <component
+    :is="destinationComponent"
+    v-if="entry.kind === 'destination' && !entry.disabled"
+    v-bind="destinationBindings"
+    class="s-menu-item"
+    role="menuitem"
+    :data-layout="entry.layout ?? 'row'"
+    :data-density="context.density.value"
+    :data-menu-entry-id="entry.id"
+    :data-current="entry.current || undefined"
+    tabindex="-1"
+    :aria-current="entry.current ? 'page' : undefined"
+    @click="handleDestinationClick"
+    @pointermove="emit('pointer-intent')"
+    @vue:mounted="bindInteractiveVNode"
+    @vue:updated="bindInteractiveVNode"
+    @vue:before-unmount="unbindInteractiveElement"
+  >
+    <span class="s-menu-item__main">
+      <span class="s-menu-item__state" />
+      <component :is="entry.icon" v-if="entry.icon" class="s-menu-item__icon" aria-hidden="true" />
+      <span class="s-menu-item__label">{{ entry.label }}</span>
+    </span>
+    <span v-if="entry.badge !== undefined || entry.shortcut" class="s-menu-item__meta">
+      <span v-if="entry.badge !== undefined" class="s-menu-item__badge">
+        <SBadge :severity="entry.badgeSeverity ?? 'secondary'" size="xs">{{ entry.badge }}</SBadge>
+      </span>
+      <span v-if="entry.shortcut" class="s-menu-item__shortcut" aria-hidden="true">{{ entry.shortcut }}</span>
+    </span>
+  </component>
+  <button
+    v-else
+    class="s-menu-item"
+    type="button"
+    :role="itemRole"
+    :data-layout="entry.layout ?? 'row'"
+    :data-density="context.density.value"
+    :data-menu-entry-id="entry.id"
+    :data-current="isCurrent || undefined"
+    tabindex="-1"
+    :aria-disabled="entry.disabled || undefined"
+    :aria-current="isCurrent ? 'page' : undefined"
+    :aria-checked="checkedState"
+    :aria-haspopup="entry.kind === 'submenu' ? 'menu' : undefined"
+    :aria-expanded="entry.kind === 'submenu' ? submenuOpen : undefined"
+    @click="handleSelect"
+    @pointermove="emit('pointer-intent')"
+    @vue:mounted="bindInteractiveVNode"
+    @vue:updated="bindInteractiveVNode"
+    @vue:before-unmount="unbindInteractiveElement"
+  >
+    <span class="s-menu-item__main">
+      <span class="s-menu-item__state">
+        <Check
+          v-if="entry.kind === 'checkbox' && entry.checked !== false"
+          class="s-menu-item__state-icon"
+          aria-hidden="true"
+        />
+        <span
+          v-else-if="entry.kind === 'radio' && entry.checked"
+          class="s-menu-item__radio-dot"
+          aria-hidden="true"
+        />
+      </span>
+      <component :is="entry.icon" v-if="entry.icon" class="s-menu-item__icon" aria-hidden="true" />
+      <span class="s-menu-item__label">{{ entry.label }}</span>
+    </span>
+    <span v-if="entry.badge !== undefined || entry.shortcut || entry.kind === 'submenu'" class="s-menu-item__meta">
+      <span v-if="entry.badge !== undefined" class="s-menu-item__badge">
+        <SBadge :severity="entry.badgeSeverity ?? 'secondary'" size="xs">{{ entry.badge }}</SBadge>
+      </span>
+      <span v-if="entry.shortcut" class="s-menu-item__shortcut" aria-hidden="true">{{ entry.shortcut }}</span>
+      <ChevronRight v-if="entry.kind === 'submenu'" class="s-menu-item__submenu-icon" aria-hidden="true" />
+    </span>
+  </button>
+</template>
+
+<script setup lang="ts">
+import { computed, inject, ref, type VNode } from 'vue'
+import { RouterLink } from 'vue-router'
+import { resolveLinkTarget } from '../../../internal/linkTarget'
+import { useInteractiveLeafRegistration } from '../../../internal/passiveContentContract'
+import { Check, ChevronRight } from '../../icons/sputnigUiIcons'
+import type { SMenuActivationEvent, SMenuInteractiveEntry } from '../controls/menu'
+import SBadge from '../data-display/SBadge.vue'
+import { menuContextKey } from './menuContext'
+
+defineOptions({ inheritAttrs: false })
+
+const maybeContext = inject(menuContextKey)
+if (!maybeContext) throw new Error('SMenuItem must be used inside SMenuSurface')
+const context = maybeContext
+
+export interface Props {
+  entry: SMenuInteractiveEntry
+  submenuOpen?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), { submenuOpen: false })
+const emit = defineEmits<{
+  select: [event: SMenuActivationEvent]
+  'open-submenu': []
+  'pointer-intent': []
+}>()
+const interactiveElement = ref<HTMLElement | null>(null)
+useInteractiveLeafRegistration({ owner: 'SMenuItem' })
+let unregister: (() => void) | undefined
+let suppressNextDestinationSelection = false
+
+const destinationTarget = computed(() => props.entry.kind === 'destination'
+  ? resolveLinkTarget({
+      href: props.entry.href,
+      to: props.entry.to,
+      target: props.entry.target ?? '_self',
+      rel: props.entry.rel,
+      owner: `SMenuItem(${props.entry.id})`,
+    })
+  : null)
+const destinationComponent = computed(() => destinationTarget.value?.kind === 'router' ? RouterLink : 'a')
+const destinationBindings = computed(() => destinationTarget.value?.bindings ?? {})
+const itemRole = computed(() => props.entry.kind === 'checkbox'
+  ? 'menuitemcheckbox'
+  : props.entry.kind === 'radio' ? 'menuitemradio' : 'menuitem')
+const checkedState = computed(() => props.entry.kind === 'checkbox' || props.entry.kind === 'radio'
+  ? props.entry.checked
+  : undefined)
+const isCurrent = computed(() => (
+  props.entry.kind === 'action' || props.entry.kind === 'destination'
+) && Boolean(props.entry.current && !props.entry.disabled))
+
+function requireInteractiveElement(): HTMLElement {
+  const element = interactiveElement.value
+  if (!element) throw new Error('SMenuItem: interactive element is unavailable')
+  return element
+}
+
+function bindInteractiveVNode(vnode: VNode): void {
+  if (!(vnode.el instanceof HTMLElement)) {
+    throw new Error('SMenuItem: interactive component must render one HTMLElement root')
+  }
+  if (interactiveElement.value === vnode.el) return
+  unregister?.()
+  interactiveElement.value = vnode.el
+  unregister = context.register({
+    entryId: props.entry.id,
+    label: () => props.entry.label,
+    hasSubmenu: () => props.entry.kind === 'submenu',
+    element: requireInteractiveElement,
+    setTabStop: (active) => { requireInteractiveElement().tabIndex = active ? 0 : -1 },
+    focus: () => requireInteractiveElement().focus(),
+    isFocused: () => document.activeElement === interactiveElement.value,
+    ownsEventTarget: (target) => target instanceof Node && (
+      target === interactiveElement.value || requireInteractiveElement().contains(target)
+    ),
+    activate: activateFromKeyboard,
+  })
+}
+
+function unbindInteractiveElement(): void {
+  unregister?.()
+  unregister = undefined
+  interactiveElement.value = null
+}
+
+function handleSelect(event: MouseEvent): void {
+  if (props.entry.disabled) {
+    event.preventDefault()
+    event.stopPropagation()
+    return
+  }
+  if (props.entry.kind === 'submenu') {
+    emit('open-submenu')
+    return
+  }
+  emit('select', event)
+}
+
+function handleDestinationClick(event: MouseEvent): void {
+  if (suppressNextDestinationSelection && event.detail === 0) {
+    return
+  }
+  suppressNextDestinationSelection = false
+  emit('select', event)
+}
+
+function activateFromKeyboard(event: KeyboardEvent): void {
+  if (props.entry.disabled) return
+  if (props.entry.kind === 'submenu') {
+    event.preventDefault()
+    emit('open-submenu')
+    return
+  }
+  if (props.entry.kind === 'destination') {
+    emit('select', event)
+    const navigationPrevented = event.defaultPrevented
+    event.preventDefault()
+    if (!navigationPrevented) {
+      suppressNextDestinationSelection = true
+      try {
+        requireInteractiveElement().click()
+      } finally {
+        suppressNextDestinationSelection = false
+      }
+    }
+    return
+  }
+  event.preventDefault()
+  emit('select', event)
+}
+</script>
+
+<style lang="postcss" src="./SMenuItem.css" scoped></style>

package/src/components/shared/_internal/SMenuLayer.css

@@ -0,0 +1,21 @@
+.s-menu-layer {
+  position: fixed;
+}
+
+.s-menu-layer--dropdown {
+  --s-menu-surface-width: max-content;
+  --s-menu-surface-min-width: 12rem;
+  --s-menu-surface-max-width: 90vw;
+}
+
+.s-menu-layer--context {
+  --s-menu-surface-width: min(24rem, calc(100vw - 10px));
+  --s-menu-surface-min-width: 14rem;
+  --s-menu-surface-max-width: calc(100vw - 10px);
+}
+
+.s-menu-layer--submenu {
+  --s-menu-surface-width: max-content;
+  --s-menu-surface-min-width: var(--s-menu-inline-size-min);
+  --s-menu-surface-max-width: var(--s-menu-inline-size-max);
+}

package/src/components/shared/_internal/SMenuLayer.vue

@@ -0,0 +1,48 @@
+<template>
+  <div
+    ref="layerRef"
+    class="s-menu-layer"
+    :class="[
+      `s-menu-layer--${kind}`,
+      kind === 'context' ? 's-context-menu' : kind === 'dropdown' ? 's-dropdown-menu-items' : 's-submenu-items',
+    ]"
+    :data-kind="kind"
+    role="region"
+    :aria-label="landmarkLabel"
+    :style="layerStyle"
+  >
+    <slot />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import type { ElementApi } from '../../../internal/interactiveElement'
+
+export type SMenuLayerApi = ElementApi<HTMLDivElement>
+
+interface Props {
+  kind: 'dropdown' | 'context' | 'submenu'
+  landmarkLabel: string
+  position: { left: number; top: number }
+  zIndex: string
+}
+
+const props = defineProps<Props>()
+const layerRef = ref<HTMLDivElement | null>(null)
+const layerStyle = computed(() => ({
+  left: `${props.position.left}px`,
+  top: `${props.position.top}px`,
+  zIndex: props.zIndex,
+}))
+
+const getElement = (): HTMLDivElement => {
+  const element = layerRef.value
+  if (!element) throw new Error('SMenuLayer: layer element is unavailable')
+  return element
+}
+
+defineExpose<SMenuLayerApi>({ getElement })
+</script>
+
+<style lang="postcss" src="./SMenuLayer.css" scoped></style>

package/src/components/shared/_internal/SMenuSeparator.css

@@ -0,0 +1,5 @@
+@reference "../../../styles/reference.css";
+
+.s-menu-separator {
+  @apply my-1 -mx-1 h-px bg-surface-100 dark:bg-surface-700;
+}

package/src/components/shared/_internal/SMenuSeparator.vue

@@ -0,0 +1,13 @@
+<template>
+  <div class="s-menu-separator" role="separator" :data-menu-entry-id="entryId" />
+</template>
+
+<script setup lang="ts">
+defineOptions({ inheritAttrs: false })
+
+defineProps<{
+  entryId: string
+}>()
+</script>
+
+<style lang="postcss" src="./SMenuSeparator.css" scoped></style>