@fusion.dev/helix 0.145.0 → 0.147.0

package/dist/shared/field/field.css.js

@@ -1,58 +1,4 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`::placeholder {
-color: var(--helix-color-foreground-subtle);
-font-weight: var(--helix-weight-medium);
-}
-
-[part="label"] {
-color: var(--helix-color-foreground);
-font-family: var(--helix-font-sans);
-font-size: var(--helix-text-sm);
-font-weight: var(--helix-weight-medium);
-line-height: var(--helix-leading-tight);
-}
-
-:host([required]) [part="label"]::after {
-color: var(--helix-color-danger);
-content: "*";
-margin-inline-start: var(--helix-space-2xs);
-}
-
-@supports (content: "*" / "") {
-:host([required]) [part="label"]::after {
-content: "*" / "";
-}
-}
-
-[part="hint"],
-[part="feedback"] {
-font-family: var(--helix-font-sans);
-font-size: var(--helix-text-xs);
-line-height: var(--helix-leading-normal);
-margin: var(--helix-space-none);
-margin-block-start: var(--helix-space-2xs);
-}
-
-[part="hint"] {
-color: var(--helix-color-foreground-subtle);
-}
-
-[part="feedback"] {
-color: var(--helix-color-danger);
-
-font-weight: var(--helix-weight-medium);
-}
-
-:host(:disabled) [part="label"],
-:host(:disabled) [part="hint"] {
-opacity: 0.5;
-}
-
-[part="label"][data-hidden] {
-block-size: 1px;
-clip-path: inset(50%);
-inline-size: 1px;
-overflow: hidden;
-position: absolute;
-white-space: nowrap;
-}`);
+export const styles = createSheet(`::placeholder {color: var(--helix-color-foreground-subtle);font-weight: var(--helix-weight-medium);}[part="label"] {color: var(--helix-color-foreground);font-family: var(--helix-font-sans);font-size: var(--helix-text-sm);font-weight: var(--helix-weight-medium);line-height: var(--helix-leading-tight);}:host([required]) [part="label"]::after {color: var(--helix-color-danger);content: "*";margin-inline-start: var(--helix-space-2xs);}@supports (content: "*" / "") {:host([required]) [part="label"]::after {content: "*" / "";}}[part="hint"],
+[part="feedback"] {font-family: var(--helix-font-sans);font-size: var(--helix-text-xs);line-height: var(--helix-leading-normal);margin: var(--helix-space-none);margin-block-start: var(--helix-space-2xs);}[part="hint"] {color: var(--helix-color-foreground-subtle);}[part="feedback"] {color: var(--helix-color-danger);font-weight: var(--helix-weight-medium);}:host(:disabled) [part="label"],
+:host(:disabled) [part="hint"] {opacity: 0.5;}[part="label"][data-hidden] {block-size: 1px;clip-path: inset(50%);inline-size: 1px;overflow: hidden;position: absolute;white-space: nowrap;}`);

package/dist/shared/floating/entrance.css.js

@@ -1,39 +1,8 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`[part="surface"] {
---_travel: calc(var(--helix-space-2xs) * -1);
-
-opacity: 0;
-scale: 0.96;
-transform: translateY(var(--_travel));
-transition:
+export const styles = createSheet(`[part="surface"] {--_travel: calc(var(--helix-space-2xs) * -1);opacity: 0;scale: 0.96;transform: translateY(var(--_travel));transition:
 opacity var(--helix-duration-fast) var(--helix-easing-standard),
 scale var(--helix-duration-fast) var(--helix-easing-emphasized),
 transform var(--helix-duration-fast) var(--helix-easing-emphasized),
 display var(--helix-duration-fast) allow-discrete,
-overlay var(--helix-duration-fast) allow-discrete;
-}
-
-[part="surface"][data-placement^="top"] {
---_travel: var(--helix-space-2xs);
-
-transform-origin: var(--floating-arrow-x, 50%) 100%;
-}
-
-[part="surface"][data-placement^="bottom"] {
-transform-origin: var(--floating-arrow-x, 50%) 0;
-}
-
-[part="surface"][data-placed] {
-opacity: 1;
-scale: 1;
-transform: none;
-}
-
-@media (prefers-reduced-motion: reduce) {
-[part="surface"],
-[part="surface"][data-placed] {
-scale: 1;
-transform: none;
-transition: none;
-}
-}`);
+overlay var(--helix-duration-fast) allow-discrete;}[part="surface"][data-placement^="top"] {--_travel: var(--helix-space-2xs);transform-origin: var(--floating-arrow-x, 50%) 100%;}[part="surface"][data-placement^="bottom"] {transform-origin: var(--floating-arrow-x, 50%) 0;}[part="surface"][data-placed] {opacity: 1;scale: 1;transform: none;}@media (prefers-reduced-motion: reduce) {[part="surface"],
+[part="surface"][data-placed] {scale: 1;transform: none;transition: none;}}`);

package/dist/shared/floating/panel.css.js

@@ -1,18 +1,3 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`[part="surface"] {
-background-color: var(--_floating-background-color, var(--helix-color-surface-overlay));
-border: var(--_floating-border-width, var(--helix-border-floating)) solid
-var(--_floating-border-color, var(--helix-color-border));
-border-radius: var(--helix-radii-sm);
-box-shadow: var(--_floating-shadow, var(--helix-shadow-floating));
-inset: auto;
-margin: var(--helix-space-none);
-}
-
-[part="surface"][hidden] {
-display: none;
-}
-
-[part="surface"]:not(:popover-open) {
-display: none;
-}`);
+export const styles = createSheet(`[part="surface"] {background-color: var(--_floating-background-color, var(--helix-color-surface-overlay));border: var(--_floating-border-width, var(--helix-border-floating)) solid
+var(--_floating-border-color, var(--helix-color-border));border-radius: var(--helix-radii-sm);box-shadow: var(--_floating-shadow, var(--helix-shadow-floating));inset: auto;margin: var(--helix-space-none);}[part="surface"][hidden] {display: none;}[part="surface"]:not(:popover-open) {display: none;}`);

package/dist/shared/glyph/glyph.css.js

@@ -1,6 +1,2 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`[data-glyph] {
-block-size: var(--icon-size, var(--helix-size-icon));
-flex: 0 0 auto;
-inline-size: var(--icon-size, var(--helix-size-icon));
-}`);
+export const styles = createSheet(`[data-glyph] {block-size: var(--icon-size, var(--helix-size-icon));flex: 0 0 auto;inline-size: var(--icon-size, var(--helix-size-icon));}`);

package/dist/shared/live/live.css.js

@@ -1,9 +1,2 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`[part="live"] {
-block-size: 1px;
-clip-path: inset(50%);
-inline-size: 1px;
-overflow: hidden;
-position: absolute;
-white-space: nowrap;
-}`);
+export const styles = createSheet(`[part="live"] {block-size: 1px;clip-path: inset(50%);inline-size: 1px;overflow: hidden;position: absolute;white-space: nowrap;}`);

package/dist/shared/tags/tags.css.js

@@ -1,40 +1,2 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`[part="tags"] {
-display: contents;
-}
-
-:where(button)[part="rest"] {
-all: unset;
-box-sizing: border-box;
-}
-
-[part="rest"] {
-align-self: center;
-color: var(--helix-color-foreground-subtle);
-flex: 0 0 auto;
-font-family: var(--helix-font-sans);
-font-size: var(--helix-text-xs);
-font-weight: var(--helix-weight-medium);
-white-space: nowrap;
-}
-
-button[part="rest"] {
-border-radius: var(--helix-radii-sm);
-cursor: pointer;
-transition: color var(--helix-duration-fast) var(--helix-easing-standard);
-}
-
-button[part="rest"]:hover {
-color: var(--helix-color-foreground);
-}
-
-button[part="rest"]:focus-visible {
-outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);
-outline-offset: var(--helix-size-focus-offset);
-}
-
-button[part="rest"] svg {
-block-size: var(--helix-size-icon-tight);
-flex: 0 0 auto;
-inline-size: var(--helix-size-icon-tight);
-}`);
+export const styles = createSheet(`[part="tags"] {display: contents;}:where(button)[part="rest"] {all: unset;box-sizing: border-box;}[part="rest"] {align-self: center;color: var(--helix-color-foreground-subtle);flex: 0 0 auto;font-family: var(--helix-font-sans);font-size: var(--helix-text-xs);font-weight: var(--helix-weight-medium);white-space: nowrap;}button[part="rest"] {border-radius: var(--helix-radii-sm);cursor: pointer;transition: color var(--helix-duration-fast) var(--helix-easing-standard);}button[part="rest"]:hover {color: var(--helix-color-foreground);}button[part="rest"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset);}button[part="rest"] svg {block-size: var(--helix-size-icon-tight);flex: 0 0 auto;inline-size: var(--helix-size-icon-tight);}`);

package/dist/shared/viewport/viewport.css.js

@@ -1,148 +1,21 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`[part="controls"] {
-display: grid;
-gap: var(--helix-space-2xs);
-
-grid-template-areas:
+export const styles = createSheet(`[part="controls"] {display: grid;gap: var(--helix-space-2xs);grid-template-areas:
 ".      up    .      zoomin"
 "start  .     end    zoomout"
-".      down  .      full";
-position: absolute;
-
-inset-block-start: var(--helix-space-sm);
-inset-inline-end: var(--helix-space-sm);
-transition: opacity var(--helix-duration-fast) var(--helix-easing-standard);
-}
-
-[part="controls"]:not(:has([part="zoom-in"])) {
-grid-template-areas:
+".      down  .      full";position: absolute;inset-block-start: var(--helix-space-sm);inset-inline-end: var(--helix-space-sm);transition: opacity var(--helix-duration-fast) var(--helix-easing-standard);}[part="controls"]:not(:has([part="zoom-in"])) {grid-template-areas:
 ".      up    ."
 "start  .     end"
-".      down  full";
-}
-
-[part="controls"]:not(:has([part="pan-up"])) {
-grid-template-areas:
+".      down  full";}[part="controls"]:not(:has([part="pan-up"])) {grid-template-areas:
 "zoomin"
 "zoomout"
-"full";
-}
-
-:host(:fullscreen) {
-display: block;
-}
-
-:host(:state(fullscreen)) [part="region"] {
-block-size: 100dvh;
-border: none;
-border-radius: 0;
-}
-
-:host([controls-placement="top-end"]) [part="controls"] {
-inset-block: var(--helix-space-sm) auto;
-inset-inline: auto var(--helix-space-sm);
-}
-
-:host([controls-placement="top-start"]) [part="controls"] {
-inset-block: var(--helix-space-sm) auto;
-inset-inline: var(--helix-space-sm) auto;
-}
-
-:host([controls-placement="bottom-end"]) [part="controls"] {
-inset-block: auto var(--helix-space-sm);
-inset-inline: auto var(--helix-space-sm);
-}
-
-:host([controls-placement="bottom-start"]) [part="controls"] {
-inset-block: auto var(--helix-space-sm);
-inset-inline: var(--helix-space-sm) auto;
-}
-
-[part="pan-up"] {
-grid-area: up;
-}
-[part="pan-down"] {
-grid-area: down;
-}
-[part="pan-start"] {
-grid-area: start;
-}
-[part="pan-end"] {
-grid-area: end;
-}
-[part="zoom-in"] {
-grid-area: zoomin;
-}
-[part="zoom-out"] {
-grid-area: zoomout;
-}
-[part="fullscreen"] {
-grid-area: full;
-}
-
-[part="controls"] button {
-align-items: center;
-background-color: var(--viewport-control-background-color, var(--helix-color-surface-overlay));
-border: var(--helix-border-floating) solid var(--helix-color-border);
-border-radius: var(--helix-radii-sm);
-box-shadow: var(--helix-shadow-floating);
-block-size: var(--helix-size-control-sm);
-color: var(--helix-color-foreground);
-cursor: pointer;
-display: inline-flex;
-font-family: var(--helix-font-sans);
-font-size: var(--helix-text-sm);
-inline-size: var(--helix-size-control-sm);
-justify-content: center;
-padding: 0;
-}
-
-[part="controls"] button:focus-visible {
-outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);
-outline-offset: var(--helix-size-focus-offset);
-}
-
-[part="controls"] button:hover {
-background-color: color-mix(
+"full";}:host(:fullscreen) {display: block;}:host(:state(fullscreen)) [part="region"] {block-size: 100dvh;border: none;border-radius: 0;}:host([controls-placement="top-end"]) [part="controls"] {inset-block: var(--helix-space-sm) auto;inset-inline: auto var(--helix-space-sm);}:host([controls-placement="top-start"]) [part="controls"] {inset-block: var(--helix-space-sm) auto;inset-inline: var(--helix-space-sm) auto;}:host([controls-placement="bottom-end"]) [part="controls"] {inset-block: auto var(--helix-space-sm);inset-inline: auto var(--helix-space-sm);}:host([controls-placement="bottom-start"]) [part="controls"] {inset-block: auto var(--helix-space-sm);inset-inline: var(--helix-space-sm) auto;}[part="pan-up"] {grid-area: up;}[part="pan-down"] {grid-area: down;}[part="pan-start"] {grid-area: start;}[part="pan-end"] {grid-area: end;}[part="zoom-in"] {grid-area: zoomin;}[part="zoom-out"] {grid-area: zoomout;}[part="fullscreen"] {grid-area: full;}[part="controls"] button {align-items: center;background-color: var(--viewport-control-background-color, var(--helix-color-surface-overlay));border: var(--helix-border-floating) solid var(--helix-color-border);border-radius: var(--helix-radii-sm);box-shadow: var(--helix-shadow-floating);block-size: var(--helix-size-control-sm);color: var(--helix-color-foreground);cursor: pointer;display: inline-flex;font-family: var(--helix-font-sans);font-size: var(--helix-text-sm);inline-size: var(--helix-size-control-sm);justify-content: center;padding: 0;}[part="controls"] button:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset);}[part="controls"] button:hover {background-color: color-mix(
 in oklab,
 var(--helix-color-foreground) 10%,
 var(--viewport-control-background-color, var(--helix-color-surface-overlay))
-);
-}
-
-[part="gesture-hint"],
-[part="gesture-status"] {
-background-color: var(--helix-color-surface-inverse);
-border-radius: var(--helix-radii-sm);
-color: var(--helix-color-foreground-inverse);
-
-left: 50%;
-max-inline-size: calc(100% - var(--helix-space-lg) * 2);
-pointer-events: none;
-position: absolute;
-text-align: center;
-z-index: calc(var(--helix-layer-raised) + 2);
-}
-
-[part="gesture-hint"] {
-font-size: var(--helix-text-sm);
-inset-block-start: clamp(
+);}[part="gesture-hint"],
+[part="gesture-status"] {background-color: var(--helix-color-surface-inverse);border-radius: var(--helix-radii-sm);color: var(--helix-color-foreground-inverse);left: 50%;max-inline-size: calc(100% - var(--helix-space-lg) * 2);pointer-events: none;position: absolute;text-align: center;z-index: calc(var(--helix-layer-raised) + 2);}[part="gesture-hint"] {font-size: var(--helix-text-sm);inset-block-start: clamp(
 var(--helix-space-2xl),
 var(--_viewport-hint-y, 50%),
 calc(100% - var(--helix-space-2xl))
-);
-padding: var(--helix-space-xs) var(--helix-space-sm);
-translate: -50% -50%;
-}
-
-[part="gesture-status"] {
-font-size: var(--helix-text-xs);
-inset-block-start: var(--helix-space-xs);
-padding: var(--helix-space-2xs) var(--helix-space-xs);
-translate: -50% 0;
-}
-
-[part="gesture-hint"][hidden],
-[part="gesture-status"][hidden] {
-display: none;
-}`);
+);padding: var(--helix-space-xs) var(--helix-space-sm);translate: -50% -50%;}[part="gesture-status"] {font-size: var(--helix-text-xs);inset-block-start: var(--helix-space-xs);padding: var(--helix-space-2xs) var(--helix-space-xs);translate: -50% 0;}[part="gesture-hint"][hidden],
+[part="gesture-status"][hidden] {display: none;}`);

package/dist/skeleton/root/skeleton-root.css.js

@@ -1,128 +1,20 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {
-display: block;
-inline-size: 100%;
-}
-
-:host(:not([shape])) {
-block-size: var(--skeleton-block-size, var(--helix-size-control));
-}
-
-:host([shape="text"]) {
-block-size: 1em;
-}
-
-:host([shape="circle"]) {
-aspect-ratio: 1 / 1;
-
-inline-size: var(--skeleton-size, var(--helix-size-control));
-}
-
-[part="skeleton"] {
-background-color: var(
+export const styles = createSheet(`:host {display: block;inline-size: 100%;}:host(:not([shape])) {block-size: var(--skeleton-block-size, var(--helix-size-control));}:host([shape="text"]) {block-size: 1em;}:host([shape="circle"]) {aspect-ratio: 1 / 1;inline-size: var(--skeleton-size, var(--helix-size-control));}[part="skeleton"] {background-color: var(
 --skeleton-color,
 color-mix(in oklab, var(--helix-color-foreground) 8%, transparent)
-);
-block-size: 100%;
-border-radius: var(--skeleton-radius, var(--helix-radii-sm));
-display: block;
-inline-size: 100%;
-
-overflow: hidden;
-position: relative;
-}
-
-[part="skeleton"]::after {
-animation: helix-skeleton-sweep var(--skeleton-duration, calc(var(--helix-duration-slow) * 4))
-ease-in-out infinite;
-background-image: linear-gradient(
+);block-size: 100%;border-radius: var(--skeleton-radius, var(--helix-radii-sm));display: block;inline-size: 100%;overflow: hidden;position: relative;}[part="sheen"] {animation: helix-skeleton-sweep var(--skeleton-duration, calc(var(--helix-duration-slow) * 4))
+ease-in-out infinite;background-image: linear-gradient(
 90deg,
 transparent 0%,
 var(--skeleton-sheen-color, color-mix(in oklab, var(--helix-color-foreground) 8%, transparent))
 50%,
 transparent 100%
-);
-content: "";
-inline-size: 200%;
-inset-block: 0;
-inset-inline-start: 0;
-position: absolute;
-}
-
-:host([shape="text"]) [part="skeleton"] {
-border-radius: var(--helix-radii-full);
-}
-
-:host([shape="circle"]) [part="skeleton"] {
-
-border-radius: var(--helix-radii-full);
-}
-
-:host([effect="pulse"]) [part="skeleton"]::after,
-:host([effect="none"]) [part="skeleton"]::after {
-animation: none;
-background-image: none;
-}
-
-:host([effect="pulse"]) [part="skeleton"] {
-animation: helix-skeleton-pulse var(--skeleton-duration, calc(var(--helix-duration-slow) * 4))
-ease-in-out infinite;
-}
-
-@keyframes helix-skeleton-pulse {
-50% {
-opacity: 0.4;
-}
-}
-
-:host(:not(:empty)) {
-block-size: auto;
-inline-size: fit-content;
-max-inline-size: 100%;
-position: relative;
-}
-
-:host(:not(:empty)) [part="content"] {
-display: block;
-}
-
-:host(:not(:empty)) [part="skeleton"] {
-block-size: auto;
-inset: 0;
-position: absolute;
-}
-
-:host(:not(:empty):not([loading])) [part="skeleton"] {
-display: none;
-}
-
-:host([loading]:not(:empty)) [part="content"] {
-visibility: hidden;
-}
-
-@keyframes helix-skeleton-sweep {
-from {
-translate: -50% 0;
-}
-
-to {
-translate: 50% 0;
-}
-}
-
-@media (prefers-reduced-motion: reduce) {
-[part="skeleton"]::after,
-:host([effect="pulse"]) [part="skeleton"] {
-animation: none;
-}
-
-[part="skeleton"]::after {
-background-image: none;
-}
-}
-
-@media print {
-:host {
-display: none;
-}
-}`);
+);display: block;inline-size: 200%;inset-block: 0;inset-inline-start: 0;position: absolute;}:host([shape="text"]) [part="skeleton"] {border-radius: var(--helix-radii-full);}:host([shape="circle"]) [part="skeleton"] {border-radius: var(--helix-radii-full);}:host([effect="pulse"]) [part="sheen"],
+:host([effect="none"]) [part="sheen"] {animation: none;background-image: none;}:host([effect="pulse"]) [part="skeleton"] {animation: helix-skeleton-pulse var(--skeleton-duration, calc(var(--helix-duration-slow) * 4))
+ease-in-out infinite;}@keyframes helix-skeleton-pulse {50% {opacity: 0.4;}}:host(:state(wrapping)),
+:host(:not(:defined):not(:empty)) {block-size: auto;inline-size: fit-content;max-inline-size: 100%;position: relative;}:host(:state(wrapping)) [part="content"],
+:host(:not(:defined):not(:empty)) [part="content"] {display: block;}:host(:state(wrapping)) [part="skeleton"],
+:host(:not(:defined):not(:empty)) [part="skeleton"] {block-size: auto;inset: 0;position: absolute;}:host(:state(wrapping):not([loading])) [part="skeleton"],
+:host(:not(:defined):not(:empty):not([loading])) [part="skeleton"] {display: none;}:host([loading]:state(wrapping)) [part="content"],
+:host([loading]:not(:defined):not(:empty)) [part="content"] {visibility: hidden;}@keyframes helix-skeleton-sweep {from {translate: -50% 0;}to {translate: 50% 0;}}@media (prefers-reduced-motion: reduce) {[part="sheen"],
+:host([effect="pulse"]) [part="skeleton"] {animation: none;}[part="sheen"] {background-image: none;}}@media print {:host {display: none;}}`);

package/dist/skeleton/root/skeleton-root.d.ts

@@ -18,6 +18,7 @@ import type { CSSResultGroup } from 'lit';
  * @documentation https://fusion.dev/helix/components/skeleton
  *
  * @csspart content - The box around the content, hidden while `loading`.
+ * @csspart sheen - The highlight swept across the shape. Hidden for `effect="pulse"` and `effect="none"`.
  * @csspart skeleton - The placeholder shape.
  *
  * @cssproperty --skeleton-block-size - The height of the block shape, which is the shape when `shape` is unset. Defaults to the control height.

package/dist/skip-link/root/skip-link-root.css.js

@@ -1,36 +1,3 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {
-display: block;
-inset-block-start: var(--skip-link-inset-block, var(--helix-space-sm));
-inset-inline-start: var(--skip-link-inset-inline, var(--helix-space-sm));
-position: fixed;
-z-index: var(--helix-layer-overlay);
-}
-
-[part="link"] {
-background-color: var(--skip-link-background-color, var(--helix-color-surface-inverse));
-border: var(--skip-link-border-width, var(--helix-border-floating)) solid
-var(--skip-link-border-color, var(--helix-color-border));
-border-radius: var(--skip-link-radius, var(--helix-radii-sm));
-box-shadow: var(--skip-link-shadow, var(--helix-shadow-floating));
-color: var(--skip-link-color, var(--helix-color-foreground-inverse));
-display: inline-block;
-font-family: var(--helix-font-sans);
-font-size: var(--skip-link-font-size, var(--helix-text-sm));
-font-weight: var(--helix-weight-medium);
-line-height: var(--helix-leading-normal);
-padding-block: var(--skip-link-padding-block, var(--helix-space-sm));
-padding-inline: var(--skip-link-padding-inline, var(--helix-space-md));
-text-decoration: none;
-}
-
-[part="link"]:focus-visible {
-outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);
-outline-offset: var(--helix-size-focus-offset);
-}
-
-@media print {
-:host {
-display: none;
-}
-}`);
+export const styles = createSheet(`:host {display: block;inset-block-start: var(--skip-link-inset-block, var(--helix-space-sm));inset-inline-start: var(--skip-link-inset-inline, var(--helix-space-sm));position: fixed;z-index: var(--helix-layer-overlay);}:host(:not(:focus-within)) {block-size: 1px;border: var(--helix-space-none);clip-path: inset(50%);inline-size: 1px;margin: var(--helix-space-none);overflow: hidden;padding: var(--helix-space-none);position: absolute;white-space: nowrap;}[part="link"] {background-color: var(--skip-link-background-color, var(--helix-color-surface-inverse));border: var(--skip-link-border-width, var(--helix-border-floating)) solid
+var(--skip-link-border-color, var(--helix-color-border));border-radius: var(--skip-link-radius, var(--helix-radii-sm));box-shadow: var(--skip-link-shadow, var(--helix-shadow-floating));color: var(--skip-link-color, var(--helix-color-foreground-inverse));display: inline-block;font-family: var(--helix-font-sans);font-size: var(--skip-link-font-size, var(--helix-text-sm));font-weight: var(--helix-weight-medium);line-height: var(--helix-leading-normal);padding-block: var(--skip-link-padding-block, var(--helix-space-sm));padding-inline: var(--skip-link-padding-inline, var(--helix-space-md));text-decoration: none;}[part="link"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset);}@media print {:host {display: none;}}`);

package/dist/skip-link/root/skip-link-root.d.ts

@@ -6,9 +6,9 @@ import type { CSSResultGroup } from 'lit';
  *
  * @description
  * Hidden until it receives keyboard focus, then shown in the corner of the
- * viewport. It is hidden with the base layer's visually hidden helper, so it
- * stays in the tab order and the accessibility tree. This stylesheet adds the
- * reveal.
+ * viewport. Its own stylesheet hides it with the visually hidden recipe the
+ * base layer uses, so it stays in the tab order and the accessibility tree,
+ * and is hidden with or without the base layer.
  *
  * It is fixed to the viewport, because the page may already be scrolled when
  * focus arrives, from a restored position or an anchor in the address.