@hina-ui/vue 1.7.6 → 1.7.8

package/dist/shared/primitives/splitter/units.ts

@@ -0,0 +1,123 @@
+import type { PanelConstraints, PanelData, SizeUnit } from './types'
+
+function convertValueToPercent({
+  sizeUnit,
+  groupSizeInPixels,
+  value,
+}: {
+  sizeUnit: SizeUnit
+  groupSizeInPixels: number | null
+  value: number | undefined
+}) {
+  if (value == null) return value
+  if (sizeUnit === '%') return value
+  if (groupSizeInPixels == null || groupSizeInPixels === 0) return undefined
+  return (value / groupSizeInPixels) * 100
+}
+
+export function convertPanelConstraintsToPercent({
+  panelDataArray,
+  groupSizeInPixels,
+}: {
+  panelDataArray: PanelData[]
+  groupSizeInPixels: number | null
+}): PanelConstraints[] | null {
+  const requiresMeasurement = panelDataArray.some(
+    panelData => (panelData.constraints.sizeUnit ?? '%') === 'px',
+  )
+  if (requiresMeasurement && (!groupSizeInPixels || Number.isNaN(groupSizeInPixels))) return null
+  return panelDataArray.map(panelData => {
+    const constraints = panelData.constraints
+    const sizeUnit = constraints.sizeUnit ?? '%'
+    const collapsedSize = convertValueToPercent({
+      groupSizeInPixels,
+      sizeUnit,
+      value: constraints.collapsedSize,
+    })
+    const defaultSize = convertValueToPercent({
+      groupSizeInPixels,
+      sizeUnit,
+      value: constraints.defaultSize,
+    })
+    const maxSize = convertValueToPercent({
+      groupSizeInPixels,
+      sizeUnit,
+      value: constraints.maxSize,
+    })
+    const minSize = convertValueToPercent({
+      groupSizeInPixels,
+      sizeUnit,
+      value: constraints.minSize,
+    })
+    return {
+      ...constraints,
+      collapsedSize: collapsedSize ?? constraints.collapsedSize ?? 0,
+      defaultSize,
+      maxSize: maxSize ?? 100,
+      minSize: minSize ?? 0,
+      sizeUnit: '%',
+    }
+  })
+}
+
+export function hasPixelSizedPanel(panelDataArray: PanelData[]) {
+  return panelDataArray.some(panelData => (panelData.constraints.sizeUnit ?? '%') === 'px')
+}
+
+export function recalculateLayoutForPixelPanels({
+  layout,
+  panelDataArray,
+  prevGroupSize,
+  nextGroupSize,
+}: {
+  layout: number[]
+  panelDataArray: PanelData[]
+  prevGroupSize: number | null
+  nextGroupSize: number | null
+}): number[] | null {
+  if (!hasPixelSizedPanel(panelDataArray)) return null
+  if (
+    prevGroupSize == null ||
+    nextGroupSize == null ||
+    prevGroupSize === 0 ||
+    nextGroupSize === 0 ||
+    Number.isNaN(prevGroupSize) ||
+    Number.isNaN(nextGroupSize)
+  )
+    return null
+  const pixelPanelIndices = panelDataArray.reduce<number[]>((indices, panelData, index) => {
+    if ((panelData.constraints.sizeUnit ?? '%') === 'px') indices.push(index)
+    return indices
+  }, [])
+  if (pixelPanelIndices.length === 0) return null
+  const pixelIndexSet = new Set(pixelPanelIndices)
+  const nextLayout = layout.map(size => size ?? 0)
+  const nextPixelPercents = pixelPanelIndices.map(index => {
+    const prevPercent = layout[index] ?? 0
+    const prevPixelSize = (prevPercent / 100) * prevGroupSize
+    return (prevPixelSize / nextGroupSize) * 100
+  })
+  const totalNextPixelPercent = nextPixelPercents.reduce((sum, value) => sum + value, 0)
+  const prevPercentForPercentPanels = layout.reduce((sum, size, index) => {
+    if (pixelIndexSet.has(index)) return sum
+    return sum + (size ?? 0)
+  }, 0)
+  const availableNextPercent = Math.max(0, 100 - totalNextPixelPercent)
+  const scaleFactor =
+    prevPercentForPercentPanels > 0 ? availableNextPercent / prevPercentForPercentPanels : 0
+  pixelPanelIndices.forEach((panelIndex, arrayIndex) => {
+    nextLayout[panelIndex] = nextPixelPercents[arrayIndex]!
+  })
+  for (let index = 0; index < nextLayout.length; index++) {
+    if (pixelIndexSet.has(index)) continue
+    const prevSize = layout[index] ?? 0
+    nextLayout[index] = prevSize * scaleFactor
+  }
+  const total = nextLayout.reduce((sum, size) => sum + size, 0)
+  if (total > 0 && Math.abs(total - 100) > 1e-9) {
+    const factor = 100 / total
+    for (let index = 0; index < nextLayout.length; index++)
+      nextLayout[index] = (nextLayout[index] ?? 0) * factor
+  }
+  return nextLayout
+}

package/dist/shared/primitives/splitter/validation.ts

@@ -0,0 +1,55 @@
+import { assert } from './assert'
+import { fuzzyNumbersEqual } from './compare'
+import { resizePanel } from './resizePanel'
+import type { PanelConstraints } from './types'
+
+export function validatePanelGroupLayout({
+  layout: prevLayout,
+  panelConstraints,
+}: {
+  layout: number[]
+  panelConstraints: PanelConstraints[]
+}): number[] {
+  const nextLayout = [...prevLayout]
+  if (nextLayout.length === 0 && panelConstraints.length === 0) return nextLayout
+  const nextLayoutTotalSize = nextLayout.reduce((accumulated, current) => accumulated + current, 0)
+  if (nextLayout.length !== panelConstraints.length) {
+    throw new Error(
+      `Invalid ${panelConstraints.length} panel layout: ${nextLayout.map(size => `${size}%`).join(', ')}`,
+    )
+  } else if (!fuzzyNumbersEqual(nextLayoutTotalSize, 100)) {
+    console.warn(
+      `WARNING: Invalid layout total size: ${nextLayout.map(size => `${size}%`).join(', ')}. Layout normalization will be applied.`,
+    )
+    for (let index = 0; index < panelConstraints.length; index++) {
+      const unsafeSize = nextLayout[index]
+      assert(unsafeSize != null)
+      const safeSize = (100 / nextLayoutTotalSize) * unsafeSize
+      nextLayout[index] = safeSize
+    }
+  }
+  let remainingSize = 0
+  for (let index = 0; index < panelConstraints.length; index++) {
+    const unsafeSize = nextLayout[index]
+    assert(unsafeSize != null)
+    const safeSize = resizePanel({ panelConstraints, panelIndex: index, size: unsafeSize })
+    if (unsafeSize !== safeSize) {
+      remainingSize += unsafeSize - safeSize
+      nextLayout[index] = safeSize
+    }
+  }
+  if (!fuzzyNumbersEqual(remainingSize, 0)) {
+    for (let index = 0; index < panelConstraints.length; index++) {
+      const prevSize = nextLayout[index]
+      assert(prevSize != null)
+      const unsafeSize = prevSize + remainingSize
+      const safeSize = resizePanel({ panelConstraints, panelIndex: index, size: unsafeSize })
+      if (prevSize !== safeSize) {
+        remainingSize -= safeSize - prevSize
+        nextLayout[index] = safeSize
+        if (fuzzyNumbersEqual(remainingSize, 0)) break
+      }
+    }
+  }
+  return nextLayout
+}

package/dist/shared/primitives/stepper/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 UnoVue <https://github.com/unovue>
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/shared/primitives/stepper/index.ts

@@ -0,0 +1,58 @@
+export type StepperState = 'completed' | 'active' | 'inactive'
+
+export const STEPPER_KEYS = ['Enter', ' ', 'ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown']
+
+export const STEPPER_STATUS_STYLE = {
+  transform: 'translateX(-100%)',
+  position: 'absolute',
+  pointerEvents: 'none',
+  opacity: 0,
+  margin: 0,
+} as const
+
+export function stepperStatusText(step: number | undefined, total: number) {
+  return ` Step ${step ?? ''} of ${total}`
+}
+
+export function stepperItemState(completed: boolean, current: number, step: number): StepperState {
+  if (completed) return 'completed'
+  if (current === step) return 'active'
+  if (current > step) return 'completed'
+  return 'inactive'
+}
+
+export function isStepFocusable(disabled: boolean, linear: boolean, step: number, current: number) {
+  if (disabled) return false
+  if (linear) return step <= current || step === current + 1
+  return true
+}
+
+export function canGoToStep(
+  step: number,
+  items: HTMLElement[],
+  linear: boolean,
+  current: number | undefined,
+) {
+  if (step > items.length) return false
+  if (step < 1) return false
+  if (items.length && !!items[step] && !!items[step].getAttribute('disabled')) return false
+  if (linear && step > (current ?? 1) + 1) return false
+  return true
+}
+
+export function adjacentStepperItems(items: HTMLElement[], current: number) {
+  return {
+    next: items.length && current < items.length ? items[current] : null,
+    prev: items.length && current > 1 ? items[current - 2] : null,
+  }
+}
+
+export function activatesStepOnPointer(
+  event: { ctrlKey: boolean },
+  linear: boolean,
+  step: number,
+  current: number,
+) {
+  if (event.ctrlKey !== false) return false
+  return !linear || step <= current || step === current + 1
+}

package/dist/shared/primitives/tabs/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 UnoVue <https://github.com/unovue>
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/shared/primitives/tabs/index.ts

@@ -0,0 +1,18 @@
+export type TabsValue = string | number
+export type TabsActivationMode = 'automatic' | 'manual'
+
+export function makeTriggerId(baseId: string, value: TabsValue) {
+  return `${baseId}-trigger-${value}`
+}
+
+export function makeContentId(baseId: string, value: TabsValue) {
+  return `${baseId}-content-${value}`
+}
+
+export function tabsState(selected: boolean) {
+  return selected ? 'active' : 'inactive'
+}
+
+export function activatesOnFocus(mode: TabsActivationMode, selected: boolean, disabled: boolean) {
+  return !selected && !disabled && mode !== 'manual'
+}

package/dist/shared/primitives/toggle/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 UnoVue <https://github.com/unovue>
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/shared/primitives/toggle/index.ts

@@ -0,0 +1,5 @@
+export type ToggleState = 'on' | 'off'
+
+export function toggleState(pressed: unknown): ToggleState {
+  return pressed ? 'on' : 'off'
+}

package/dist/shared/primitives/value/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 UnoVue <https://github.com/unovue>
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/shared/primitives/value/index.ts

@@ -0,0 +1,80 @@
+export type SingleOrMultipleType = 'single' | 'multiple'
+
+export function isEqual(a: unknown, b: unknown): boolean {
+  if (a === b) return true
+  if (typeof a !== typeof b) return false
+  if (typeof a === 'number') return Number.isNaN(a) && Number.isNaN(b)
+  if (typeof a !== 'object' || a === null || b === null) return false
+  if (Array.isArray(a))
+    return (
+      Array.isArray(b) &&
+      a.length === b.length &&
+      a.every((value, index) => isEqual(value, b[index]))
+    )
+  if (Array.isArray(b)) return false
+  if (a instanceof Date || b instanceof Date)
+    return a instanceof Date && b instanceof Date && a.getTime() === b.getTime()
+  if (Object.getPrototypeOf(a) !== Object.getPrototypeOf(b)) return false
+  const left = a as Record<string, unknown>
+  const right = b as Record<string, unknown>
+  const keys = Object.keys(left)
+  return (
+    keys.length === Object.keys(right).length &&
+    keys.every(key => Object.hasOwn(right, key) && isEqual(left[key], right[key]))
+  )
+}
+
+export function isValueEqualOrExist(base: unknown, current: unknown) {
+  if (base === undefined || base === null) return false
+  if (Array.isArray(base)) return base.some(value => isEqual(value, current))
+  return isEqual(base, current)
+}
+
+export function singleOrMultipleType({
+  type,
+  defaultValue,
+  modelValue,
+}: {
+  type?: SingleOrMultipleType
+  defaultValue?: unknown
+  modelValue?: unknown
+}): SingleOrMultipleType {
+  if (type) return type
+  if (modelValue !== undefined || defaultValue !== undefined)
+    return Array.isArray(modelValue || defaultValue) ? 'multiple' : 'single'
+  return 'single'
+}
+
+export function singleOrMultipleDefault({
+  type,
+  defaultValue,
+}: {
+  type?: SingleOrMultipleType
+  defaultValue?: unknown
+}) {
+  if (defaultValue !== undefined) return defaultValue
+  return type === 'single' ? undefined : []
+}
+
+export function toggleArrayValue<T>(values: T[], value: T) {
+  const next = [...values]
+  if (isValueEqualOrExist(next, value))
+    next.splice(
+      next.findIndex(item => isEqual(item, value)),
+      1,
+    )
+  else next.push(value)
+  return next
+}
+
+export function nextSingleOrMultipleValue<T>(
+  type: SingleOrMultipleType,
+  current: T | T[] | undefined,
+  value: T,
+): T | T[] | undefined {
+  if (type === 'single') return isEqual(value, current) ? undefined : value
+  return toggleArrayValue(
+    Array.isArray(current) ? current : [current].filter((item): item is T => !!item),
+    value,
+  )
+}

package/dist/shared/primitives/visually-hidden/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 UnoVue <https://github.com/unovue>
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/shared/primitives/visually-hidden/index.ts

@@ -0,0 +1,25 @@
+export type VisuallyHiddenFeature = 'focusable' | 'fully-hidden'
+
+export const VISUALLY_HIDDEN_STYLE = {
+  position: 'absolute',
+  border: 0,
+  width: '1px',
+  height: '1px',
+  padding: 0,
+  margin: '-1px',
+  overflow: 'hidden',
+  clip: 'rect(0, 0, 0, 0)',
+  clipPath: 'inset(50%)',
+  whiteSpace: 'nowrap',
+  wordWrap: 'normal',
+  top: '-1px',
+  left: '-1px',
+} as const
+
+export function isAriaHidden(feature: VisuallyHiddenFeature) {
+  return feature === 'focusable' || feature === 'fully-hidden'
+}
+
+export function isFullyHidden(feature: VisuallyHiddenFeature) {
+  return feature === 'fully-hidden'
+}

package/dist/shared/styles/density.css

@@ -1,8 +1,10 @@
 :root,
 [data-density='comfortable'] {
+  --hn-control-h-xs: 1.5rem;
   --hn-control-h-sm: 1.75rem;
   --hn-control-h-md: 2.25rem;
   --hn-control-h-lg: 2.75rem;
+  --hn-control-px-xs: 0.5rem;
   --hn-control-px-sm: 0.625rem;
   --hn-control-px-md: 1rem;
   --hn-control-px-lg: 1.25rem;
@@ -16,9 +18,11 @@
 }
 
 [data-density='compact'] {
+  --hn-control-h-xs: 1.25rem;
   --hn-control-h-sm: 1.5rem;
   --hn-control-h-md: 1.875rem;
   --hn-control-h-lg: 2.25rem;
+  --hn-control-px-xs: 0.25rem;
   --hn-control-px-sm: 0.375rem;
   --hn-control-px-md: 0.5rem;
   --hn-control-px-lg: 0.75rem;

package/dist/shared/styles/float-button.css

@@ -19,20 +19,34 @@
 }
 
 .hn-float-button:not([data-position='static'])[data-placement^='top'] {
-  top: max(var(--hn-float-offset), var(--hn-float-safe-top));
+  top: max(var(--hn-float-offset-y, var(--hn-float-offset)), var(--hn-float-safe-top));
 }
 .hn-float-button:not([data-position='static']) {
   max-inline-size: calc(
-    100% - max(var(--hn-float-offset), var(--hn-float-safe-start)) -
-      max(var(--hn-float-offset), var(--hn-float-safe-end))
+    100% - max(var(--hn-float-offset-x, var(--hn-float-offset)), var(--hn-float-safe-start)) -
+      max(var(--hn-float-offset-x, var(--hn-float-offset)), var(--hn-float-safe-end))
   );
 }
 .hn-float-button:not([data-position='static'])[data-placement^='bottom'] {
-  bottom: max(var(--hn-float-offset), var(--hn-float-safe-bottom));
+  bottom: max(var(--hn-float-offset-y, var(--hn-float-offset)), var(--hn-float-safe-bottom));
 }
 .hn-float-button:not([data-position='static'])[data-placement$='start'] {
-  inset-inline-start: max(var(--hn-float-offset), var(--hn-float-safe-start));
+  inset-inline-start: max(
+    var(--hn-float-offset-x, var(--hn-float-offset)),
+    var(--hn-float-safe-start)
+  );
 }
 .hn-float-button:not([data-position='static'])[data-placement$='end'] {
-  inset-inline-end: max(var(--hn-float-offset), var(--hn-float-safe-end));
+  inset-inline-end: max(var(--hn-float-offset-x, var(--hn-float-offset)), var(--hn-float-safe-end));
+}
+
+.hn-float-button.hn-float-button-leave {
+  pointer-events: none;
+  transition-property: opacity, scale;
+  transition-duration: var(--hn-duration-fast);
+  transition-timing-function: var(--hn-ease-move);
+}
+.hn-float-button.hn-float-button-leave::before,
+.hn-float-button.hn-float-button-leave::after {
+  transition: none;
 }

package/dist/shared/styles/line-clamp.css

@@ -0,0 +1,98 @@
+@property --hn-line-clamp-fade {
+  syntax: '<number>';
+  inherits: false;
+  initial-value: 0;
+}
+
+.hn-line-clamp-root,
+.hn-line-clamp {
+  min-width: 0;
+}
+
+.hn-line-clamp:not([data-expanded]),
+.hn-line-clamp[data-animating],
+.hn-line-clamp[data-measuring] {
+  overflow: hidden;
+}
+
+.hn-line-clamp:not([data-expanded]):not([data-animating]),
+.hn-line-clamp[data-measuring] {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: var(--hn-line-clamp, 3);
+}
+
+.hn-line-clamp[data-measuring] {
+  max-height: none !important;
+  transition: none !important;
+}
+
+.hn-line-clamp[data-animating] {
+  transition:
+    max-height var(--hn-duration-base) var(--hn-ease-move),
+    --hn-line-clamp-fade var(--hn-duration-base) var(--hn-ease-move);
+}
+
+.hn-line-clamp:not([data-expanded]),
+.hn-line-clamp[data-animating] {
+  mask-image: linear-gradient(
+    to bottom,
+    #000 calc(100% - min(1.5lh, calc(var(--hn-line-clamp, 3) * 0.6lh)) * var(--hn-line-clamp-fade)),
+    transparent
+  );
+}
+
+.hn-line-clamp-root[data-truncated='true'] > .hn-line-clamp:not([data-expanded]) {
+  --hn-line-clamp-fade: 1;
+}
+
+.hn-line-clamp-root[data-truncated='false'] > .hn-line-clamp {
+  mask-image: none;
+}
+
+.hn-line-clamp-toggle {
+  display: flex;
+  align-items: center;
+  height: 1lh;
+  margin-block-start: var(--spacing);
+}
+
+.hn-line-clamp-root[data-truncated='false'] > .hn-line-clamp-toggle {
+  display: none;
+}
+
+@supports (animation-timeline: scroll()) and (timeline-scope: --hn-line-clamp) {
+  .hn-line-clamp-root:not([data-truncated]):not([data-expanded]) {
+    timeline-scope: --hn-line-clamp;
+  }
+
+  .hn-line-clamp-root:not([data-truncated]):not([data-expanded]) > .hn-line-clamp {
+    scroll-timeline: --hn-line-clamp block;
+    animation: hn-line-clamp-fade 1ms linear both;
+    animation-timeline: --hn-line-clamp;
+  }
+
+  .hn-line-clamp-root:not([data-truncated]):not([data-expanded]) > .hn-line-clamp-toggle {
+    height: 0;
+    margin-block-start: 0;
+    visibility: hidden;
+    animation: hn-line-clamp-toggle 1ms linear both;
+    animation-timeline: --hn-line-clamp;
+  }
+}
+
+@keyframes hn-line-clamp-fade {
+  from,
+  to {
+    --hn-line-clamp-fade: 1;
+  }
+}
+
+@keyframes hn-line-clamp-toggle {
+  from,
+  to {
+    height: 1lh;
+    margin-block-start: var(--spacing);
+    visibility: visible;
+  }
+}

package/dist/shared/styles/tokens.css

@@ -12,6 +12,7 @@
 @import './timeline.css';
 @import './stepper.css';
 @import './float-button.css';
+@import './line-clamp.css';
 @import './masonry.css';
 @import './carousel.css';
 @import './base.css';

package/dist/shared/styles/typography.css

@@ -44,6 +44,24 @@
     margin-inline-start: 0;
     margin-block-start: 0.25em;
   }
+
+  &[data-orientation='horizontal'] {
+    display: grid;
+    grid-template-columns: var(--hn-dl-term-width, max-content) minmax(0, 1fr);
+    column-gap: 1.5em;
+    row-gap: 0.75em;
+    align-items: baseline;
+
+    & > dt {
+      grid-column: 1;
+      margin-block-start: 0;
+    }
+
+    & > dd {
+      grid-column: 2;
+      margin-block-start: 0;
+    }
+  }
 }
 
 @utility hn-table {