@pantoken/components 0.1.0

package/README.md

@@ -0,0 +1,114 @@
+# @pantoken/components
+
+An InstUI-look CSS component library, built from the `--instui-*` tokens. The shipped stylesheets:
+
+- **`base.css`** — opt-in global document defaults from the tokens (box-sizing, body reset, page
+  surface, base text/font, `color-scheme`). It also carries the focus-outline ring, so every focusable
+  gets an accessible `:focus-visible` outline out of the box.
+- **`prose.css`** — styles rendered markdown/prose HTML (tables, headings, links, lists, code) scoped
+  to a content root, so a docs page or content region looks like InstUI. This is what the site
+  renderers ship as their `components.css`.
+- **`components.css`** — class-based component styles you apply to your own markup
+  (`<button class="instui-button">`), for the InstUI look outside a component framework. The
+  `--instui-elevation-*` shadow scale leads this sheet — enough components float that shadows are an
+  intrinsic design attribute, not an add-on.
+- **`utilities.css`** — an opt-in layer of cross-cutting classes: a `View` primitive, spacing, layout,
+  and curated semantic colour/token utilities.
+- **`fonts.css`** — opt-in `@font-face` rules for the Instructure brand fonts. `base.css` _applies_ the
+  font; `fonts.css` _loads_ the woff2s, so text degrades gracefully without it.
+- **`select.css`** — opt-in, **experimental**: styles the open `.instui-simple-select` dropdown via the
+  CSS Customizable Select model (`appearance: base-select`, Chrome 135+). Every rule is `@supports`-gated,
+  so it's inert where unsupported.
+- **`icons.css`** — one `.instui-icon-<name>` glyph class per icon.
+
+It's pure CSS derived from the tokens, so it tracks InstUI through the token IR with no dependency on
+the InstUI React packages. For the real, interactive components, use `@pantoken/react-markdown`
+(content) or `@instructure/ui-*` (apps).
+
+Elevation and the focus ring used to be separate plugins; they now ship here because so many
+components need them out of the box. The generic token→utility-class emitters, by contrast, live in
+`@pantoken/utils` (this package feeds them the curated semantic names).
+
+## Install
+
+```sh
+npm i @pantoken/components
+```
+
+Also available as `pantoken/components`.
+
+## Usage
+
+Import the ready stylesheets:
+
+```ts
+import "@pantoken/components/base.css"; // opt-in reset + focus ring (when pantoken owns the page)
+import "@pantoken/components/components.css"; // .instui-button, .instui-alert, .instui-badge (+ elevation)
+import "@pantoken/components/prose.css"; // styles content in a .pantoken-prose region
+import "@pantoken/components/utilities.css"; // opt-in View, spacing, layout, colour/token utilities
+import "@pantoken/components/fonts.css"; // opt-in: loads the Instructure brand woff2s
+```
+
+```html
+<button class="instui-button">Save</button>
+<button class="instui-button -color-secondary">Cancel</button>
+<div class="instui-alert -color-success">Saved.</div>
+<span class="instui-badge -color-danger">3</span>
+```
+
+Or build a stylesheet with a custom prefix or scope:
+
+```ts
+import { componentsCss, proseCss } from "@pantoken/components";
+
+writeFileSync("ui.css", componentsCss({ prefix: "ui" })); // .ui-button, …
+writeFileSync("bare.css", componentsCss({ prefix: null })); // .button, .alert — no prefix
+writeFileSync("content.css", proseCss({ scope: ".markdown" }));
+```
+
+The builders drop the class prefix on any falsy value (`null`, `undefined`, `""`, or omitting the
+option), so `componentsCss({ prefix: null })` yields `.button`, `.alert`, and you can author
+`class="heading -h1"`. Pass a truthy prefix — as the shipped `components.css` does with `"instui"` — to
+namespace every class.
+
+## API
+
+- **`componentsCss(options?): string`** — every class-based component (button, alert, badge), led by
+  the elevation shadow scale. `options.prefix` sets the class prefix; any falsy value drops it
+  (`.button`).
+- **`buttonCss` / `alertCss` / `badgeCss` (options?)** — one component's stylesheet.
+- **`baseCss(): string`** — the global reset plus the focus-outline ring.
+- **`proseCss(options?): string`** — the prose/content stylesheet. `options.scope` sets the
+  content-root selector (default `".pantoken-prose"`).
+- **`elevationCss(options?)`, `focusOutlineCss(options?)`** — the shadow scale and focus ring, exposed
+  for renderers that compose their own sheets (`@pantoken/pendo` does this).
+- **`viewCss`, `spacingUtilitiesCss`, `layoutUtilitiesCss`, `responsiveUtilitiesCss` (options?)** — the
+  utility builders. `responsiveUtilitiesCss` emits viewport `.<prefix>-hidden-{max,min}-{sm,md,lg,xl}`
+  classes plus a `.<prefix>-container` marker with `@container` `.<prefix>-cq-hidden-{max,min}-*`
+  variants (component-width responsiveness). The generic token→class emitters (`colorUtilitiesCss`,
+  `tokenUtilitiesCss`) come from `@pantoken/utils`.
+- **`ComponentOptions`, `ProseOptions`** — the option types.
+- **`./base.css`**, **`./components.css`**, **`./prose.css`**, **`./utilities.css`**, **`./fonts.css`**,
+  **`./icons.css`** — the prebuilt sheets at the default `instui` prefix / `.pantoken-prose` scope.
+
+## Components
+
+Every class, modifier, part, consumed token, and example is documented in the generated **CSS API
+reference** — built from these stylesheets by `@cssdoc/core`, so it can't drift. Browse it on the docs
+site under _API reference → CSS reference_, grouped into Components, Utilities, Rules, and Declarations
+(run `docs:dev` to serve it locally).
+
+The prose layer also styles GFM strikethrough (`~~`) and task lists. Components that are inherently
+interactive or layout-only (drawers, editable/in-place-edit, popover/tray positioning, transitions,
+charts, trees, view/flex/grid, app shells) are intentionally left to `@instructure/ui`; this library
+covers the styleable, static ones.
+
+## Related
+
+- The site renderers (`@pantoken/vitepress`, `@pantoken/docusaurus`, and the rest) ship the prose
+  layer pre-scoped to their content root as their own `components.css`.
+- `@pantoken/react-markdown` renders the actual InstUI components (the exact, interactive tier).
+
+## License
+
+MIT

package/dist/alert.css

@@ -0,0 +1 @@
+.instui-alert{min-inline-size:12rem;padding:var(--instui-component-alert-content-padding-vertical) var(--instui-component-alert-content-padding-horizontal);background:var(--instui-component-alert-background);color:var(--instui-component-alert-color);border:var(--instui-component-alert-border-width) var(--instui-component-alert-border-style) var(--instui-component-alert-info-border-color);border-radius:var(--instui-component-alert-border-radius);box-shadow:var(--instui-elevation-above);font-family:var(--instui-component-alert-content-font-family);font-size:var(--instui-component-alert-content-font-size);font-weight:var(--instui-component-alert-content-font-weight);line-height:var(--instui-component-alert-content-line-height);--pantoken-alert-icon-bg:var(--instui-component-alert-info-icon-background);--pantoken-alert-glyph:var(--instui-icon-info);padding-inline-start:calc(2.5rem + var(--instui-component-alert-content-padding-horizontal));position:relative}.instui-alert:before{content:"";inset-block:calc(-1 * var(--instui-component-alert-border-width));background:var(--pantoken-alert-icon-bg);inline-size:2.5rem;border-start-start-radius:var(--instui-component-alert-border-radius);border-end-start-radius:var(--instui-component-alert-border-radius);position:absolute;inset-inline-start:calc(-1 * var(--instui-component-alert-border-width))}.instui-alert:after{content:"";background:var(--instui-component-alert-icon-color);inline-size:2.5rem;-webkit-mask:var(--pantoken-alert-glyph) center / 1.125rem no-repeat;mask:var(--pantoken-alert-glyph) center / 1.125rem no-repeat;position:absolute;inset-block:0;inset-inline-start:0}.instui-alert>.instui-close-button{position:absolute;inset-block-start:var(--instui-spacing-space-xs);inset-inline-end:var(--instui-spacing-space-xs)}.instui-alert:has(>.instui-close-button){padding-inline-end:calc(var(--instui-component-base-button-medium-height) + var(--instui-spacing-space-xs))}.instui-alert.-without-shadow{box-shadow:none}.instui-alert.-screen-reader-only{clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;block-size:1px;inline-size:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.instui-alert.-color-info{border-color:var(--instui-component-alert-info-border-color)}.instui-alert.-color-success{border-color:var(--instui-component-alert-success-border-color);--pantoken-alert-icon-bg:var(--instui-component-alert-success-icon-background);--pantoken-alert-glyph:var(--instui-icon-circle-check)}.instui-alert.-color-warning{border-color:var(--instui-component-alert-warning-border-color);--pantoken-alert-icon-bg:var(--instui-component-alert-warning-icon-background);--pantoken-alert-glyph:var(--instui-icon-triangle-alert)}.instui-alert.-color-danger{border-color:var(--instui-component-alert-danger-border-color);--pantoken-alert-icon-bg:var(--instui-component-alert-danger-icon-background);--pantoken-alert-glyph:var(--instui-icon-circle-x)}.instui-alert[class*=-icon-]{--pantoken-alert-glyph:var(--pantoken-glyph)}.instui-alert[class*=-icon-]:before{background:var(--pantoken-alert-icon-bg);block-size:auto;inline-size:2.5rem;-webkit-mask:none;mask:none}.instui-alert.-has-shadow-false{box-shadow:none}.instui-alert.-variant-info{border-color:var(--instui-component-alert-info-border-color)}.instui-alert.-variant-success{border-color:var(--instui-component-alert-success-border-color);--pantoken-alert-icon-bg:var(--instui-component-alert-success-icon-background);--pantoken-alert-glyph:var(--instui-icon-circle-check)}.instui-alert.-variant-warning{border-color:var(--instui-component-alert-warning-border-color);--pantoken-alert-icon-bg:var(--instui-component-alert-warning-icon-background);--pantoken-alert-glyph:var(--instui-icon-triangle-alert)}.instui-alert.-variant-error{border-color:var(--instui-component-alert-danger-border-color);--pantoken-alert-icon-bg:var(--instui-component-alert-danger-icon-background);--pantoken-alert-glyph:var(--instui-icon-circle-x)}

package/dist/avatar.css

@@ -0,0 +1 @@
+.instui-avatar{width:var(--instui-component-avatar-size-md);height:var(--instui-component-avatar-size-md);background:var(--instui-component-avatar-background-color);color:var(--instui-component-avatar-blue-text-color);border:var(--instui-component-avatar-border-width-sm) solid var(--instui-component-avatar-border-color);font-family:var(--instui-component-avatar-font-family);font-size:var(--instui-component-avatar-font-size-md);font-weight:var(--instui-component-avatar-font-weight);border-radius:50%;justify-content:center;align-items:center;display:inline-flex;overflow:hidden}.instui-avatar.-shape-rectangle{border-radius:var(--instui-component-avatar-rectangle-radius)}.instui-avatar.-size-sm{width:var(--instui-component-avatar-size-sm);height:var(--instui-component-avatar-size-sm);font-size:var(--instui-component-avatar-font-size-sm)}.instui-avatar.-size-2xs{width:var(--instui-component-avatar-size2xs);height:var(--instui-component-avatar-size2xs);font-size:var(--instui-component-avatar-font-size2xs)}.instui-avatar.-size-xs{width:var(--instui-component-avatar-size-xs);height:var(--instui-component-avatar-size-xs);font-size:var(--instui-component-avatar-font-size-xs)}.instui-avatar.-size-lg{width:var(--instui-component-avatar-size-lg);height:var(--instui-component-avatar-size-lg);font-size:var(--instui-component-avatar-font-size-lg)}.instui-avatar.-size-xl{width:var(--instui-component-avatar-size-xl);height:var(--instui-component-avatar-size-xl);font-size:var(--instui-component-avatar-font-size-xl)}.instui-avatar.-size-2xl{width:var(--instui-component-avatar-size2xl);height:var(--instui-component-avatar-size2xl);font-size:var(--instui-component-avatar-font-size2xl)}.instui-avatar.-color-ash{color:var(--instui-component-avatar-ash-text-color)}.instui-avatar.-color-ash.-has-inverse-color{background:var(--instui-component-avatar-ash-background-color)}.instui-avatar.-color-blue{color:var(--instui-component-avatar-blue-text-color)}.instui-avatar.-color-blue.-has-inverse-color{background:var(--instui-component-avatar-blue-background-color)}.instui-avatar.-color-green{color:var(--instui-component-avatar-green-text-color)}.instui-avatar.-color-green.-has-inverse-color{background:var(--instui-component-avatar-green-background-color)}.instui-avatar.-color-grey{color:var(--instui-component-avatar-grey-text-color)}.instui-avatar.-color-grey.-has-inverse-color{background:var(--instui-component-avatar-grey-background-color)}.instui-avatar.-color-orange{color:var(--instui-component-avatar-orange-text-color)}.instui-avatar.-color-orange.-has-inverse-color{background:var(--instui-component-avatar-orange-background-color)}.instui-avatar.-color-red{color:var(--instui-component-avatar-red-text-color)}.instui-avatar.-color-red.-has-inverse-color{background:var(--instui-component-avatar-red-background-color)}.instui-avatar.-color-ai{background:linear-gradient(to bottom, var(--instui-component-avatar-ai-top-gradient-color), var(--instui-component-avatar-ai-bottom-gradient-color));color:var(--instui-component-avatar-text-on-color);border-color:#0000}.instui-avatar.-has-inverse-color{background:var(--instui-component-avatar-blue-background-color);color:var(--instui-component-avatar-text-on-color);border-color:#0000}.instui-avatar.-show-border{border-width:var(--instui-component-avatar-border-width-md);border-style:solid;border-color:var(--instui-component-avatar-border-color)}.instui-avatar>img{object-fit:cover;border-radius:inherit;block-size:100%;inline-size:100%}.instui-avatar.-size-small{width:var(--instui-component-avatar-size-sm);height:var(--instui-component-avatar-size-sm);font-size:var(--instui-component-avatar-font-size-sm)}.instui-avatar.-size-x-small{width:var(--instui-component-avatar-size-xs);height:var(--instui-component-avatar-size-xs);font-size:var(--instui-component-avatar-font-size-xs)}.instui-avatar.-size-large{width:var(--instui-component-avatar-size-lg);height:var(--instui-component-avatar-size-lg);font-size:var(--instui-component-avatar-font-size-lg)}.instui-avatar.-size-x-large{width:var(--instui-component-avatar-size-xl);height:var(--instui-component-avatar-size-xl);font-size:var(--instui-component-avatar-font-size-xl)}.instui-avatar.-color-accent1{color:var(--instui-component-avatar-blue-text-color)}.instui-avatar.-color-accent1.-has-inverse-color{background:var(--instui-component-avatar-blue-background-color)}.instui-avatar.-color-accent2{color:var(--instui-component-avatar-green-text-color)}.instui-avatar.-color-accent2.-has-inverse-color{background:var(--instui-component-avatar-green-background-color)}.instui-avatar.-color-accent3{color:var(--instui-component-avatar-red-text-color)}.instui-avatar.-color-accent3.-has-inverse-color{background:var(--instui-component-avatar-red-background-color)}.instui-avatar.-color-accent4{color:var(--instui-component-avatar-orange-text-color)}.instui-avatar.-color-accent4.-has-inverse-color{background:var(--instui-component-avatar-orange-background-color)}.instui-avatar.-color-accent5{color:var(--instui-component-avatar-ash-text-color)}.instui-avatar.-color-accent5.-has-inverse-color{background:var(--instui-component-avatar-ash-background-color)}.instui-avatar.-color-accent6{color:var(--instui-component-avatar-grey-text-color)}.instui-avatar.-color-accent6.-has-inverse-color{background:var(--instui-component-avatar-grey-background-color)}

package/dist/badge.css

@@ -0,0 +1 @@
+@keyframes pantoken-badge-pulse{0%{opacity:.7;transform:scale(1)}to{opacity:0;transform:scale(1.8)}}.instui-badge-wrapper{display:inline-flex;position:relative}.instui-badge{--pantoken-badge-accent:var(--instui-component-badge-color-primary);--pantoken-badge-text:light-dark(var(--instui-component-badge-color),var(--instui-component-badge-color-inverse));min-width:var(--instui-component-badge-size);height:var(--instui-component-badge-size);padding:0 var(--instui-component-badge-padding);font-family:var(--instui-component-badge-font-family);font-size:var(--instui-component-badge-font-size);font-weight:var(--instui-component-badge-font-weight);border-radius:var(--instui-component-badge-border-radius);background:var(--pantoken-badge-accent);color:var(--pantoken-badge-text);justify-content:center;align-items:center;line-height:1;display:inline-flex;position:relative}.instui-badge.-color-success{--pantoken-badge-accent:var(--instui-component-badge-color-success);--pantoken-badge-text:var(--instui-component-badge-color)}.instui-badge.-color-danger{--pantoken-badge-accent:var(--instui-component-badge-color-danger);--pantoken-badge-text:var(--instui-component-badge-color)}.instui-badge.-color-inverse{--pantoken-badge-accent:var(--instui-component-badge-color);--pantoken-badge-text:var(--instui-component-badge-color-inverse)}.instui-badge.-type-notification{min-width:0;width:var(--instui-spacing-space-sm);height:var(--instui-spacing-space-sm);padding:0;font-size:0}.instui-badge.-pulse:before{content:"";border:var(--instui-border-width-md) solid var(--pantoken-badge-accent);border-radius:inherit;animation:1.2s ease-out infinite pantoken-badge-pulse;position:absolute;inset:0}.instui-badge.-placement-top-end,.instui-badge.-placement-top-start,.instui-badge.-placement-bottom-end,.instui-badge.-placement-bottom-start,.instui-badge.-placement-start-center,.instui-badge.-placement-end-center{position:absolute}.instui-badge.-placement-top-end{top:-.5rem;inset-inline-end:-.5rem}.instui-badge.-placement-top-start{top:-.5rem;inset-inline-start:-.5rem}.instui-badge.-placement-bottom-end{bottom:-.5rem;inset-inline-end:-.5rem}.instui-badge.-placement-bottom-start{bottom:-.5rem;inset-inline-start:-.5rem}.instui-badge.-placement-end-center{top:50%;inset-inline-end:-.5rem;transform:translateY(-50%)}.instui-badge.-placement-start-center{top:50%;inset-inline-start:-.5rem;transform:translateY(-50%)}.instui-badge.-standalone{position:relative;inset:auto;transform:none}

package/dist/base.css

@@ -0,0 +1 @@
+*,:before,:after{box-sizing:border-box}:where(html){color-scheme:light dark;background:var(--instui-color-background-page);color:var(--instui-color-text-base);font-family:var(--instui-font-family-base);font-size:var(--instui-component-text-content-font-size);line-height:var(--instui-component-text-content-line-height);-webkit-text-size-adjust:100%;text-size-adjust:100%;-webkit-font-smoothing:antialiased}:where(body){margin:0}:where(a){color:var(--instui-color-text-interactive-navigation-primary-base);text-decoration:underline}:where(a:hover){color:var(--instui-color-text-interactive-navigation-primary-hover)}::selection{background:color-mix(in srgb, var(--instui-color-text-interactive-navigation-primary-base) 25%, transparent)}:where(:root){--instui-focus-outline-color:var(--instui-component-shared-tokens-focus-outline-info-color);--instui-focus-outline-color-start:transparent;--instui-focus-outline-width:var(--instui-component-shared-tokens-focus-outline-width);--instui-focus-outline-offset:var(--instui-component-shared-tokens-focus-outline-offset);--instui-focus-outline-radius:var(--instui-border-radius-md);--instui-focus-outline-style:solid;--instui-focus-outline-transition:outline-color .2s, outline-offset .25s;--instui-focus-outline-color-success:var(--instui-component-shared-tokens-focus-outline-success-color);--instui-focus-outline-color-danger:var(--instui-component-shared-tokens-focus-outline-danger-color);--instui-focus-outline-color-inverse:var(--instui-component-shared-tokens-focus-outline-on-color);--instui-focus-outline-inset:0rem}:where(a,button,input,select,textarea,summary,[tabindex]){outline:var(--instui-focus-outline-width) var(--instui-focus-outline-style) var(--instui-focus-outline-color-start);outline-offset:0;transition:var(--instui-focus-outline-transition)}:where(a,button,input,select,textarea,summary,[tabindex]):where(:focus-visible){outline-color:var(--instui-focus-outline-color);outline-offset:var(--instui-focus-outline-offset);border-radius:var(--instui-focus-outline-radius)}:where(.-focus-color-success):where(:focus-visible){outline-color:var(--instui-focus-outline-color-success)}:where(.-focus-color-danger):where(:focus-visible){outline-color:var(--instui-focus-outline-color-danger)}:where(.-focus-color-inverse):where(:focus-visible){outline-color:var(--instui-focus-outline-color-inverse)}:where(.-focus-position-inset):where(:focus-visible){outline-offset:var(--instui-focus-outline-inset)}:where(.-focus-within):where(:focus-within){outline-color:var(--instui-focus-outline-color);outline-offset:var(--instui-focus-outline-offset);border-radius:var(--instui-focus-outline-radius)}:where(.-without-focus-animation){transition:none}

package/dist/billboard.css

@@ -0,0 +1 @@
+.instui-billboard{text-align:center;background:var(--instui-component-billboard-background-color);padding:var(--instui-component-billboard-padding-medium);margin:var(--instui-component-billboard-medium-margin);font-family:var(--instui-component-billboard-font-family);color:var(--instui-color-text-base);display:block}.instui-billboard.-size-sm{padding:var(--instui-component-billboard-padding-small)}.instui-billboard.-size-md,.instui-billboard.-size-medium{padding:var(--instui-component-billboard-padding-medium)}.instui-billboard.-size-lg,.instui-billboard.-size-large{padding:var(--instui-component-billboard-padding-large);margin:var(--instui-component-billboard-large-margin)}.instui-billboard.-size-sm .message{font-size:var(--instui-font-size-text-sm)}.instui-billboard.-size-md .message,.instui-billboard.-size-medium .message{font-size:var(--instui-font-size-text-base)}.instui-billboard.-size-lg .message,.instui-billboard.-size-large .message{font-size:1.375rem}.instui-billboard.-clickable{cursor:pointer;border:var(--instui-component-billboard-button-border-width) var(--instui-component-billboard-button-border-style) transparent;border-radius:var(--instui-component-billboard-button-border-radius)}.instui-billboard.-clickable:hover{border-style:dashed;border-color:var(--instui-color-text-base)}.instui-billboard.-clickable:focus{border-style:solid;border-color:var(--instui-color-text-base);outline:var(--instui-focus-outline-width) var(--instui-focus-outline-style) var(--instui-focus-outline-color);outline-offset:var(--instui-focus-outline-offset)}.instui-billboard.-clickable:focus-visible{outline:var(--instui-focus-outline-width) var(--instui-focus-outline-style) var(--instui-focus-outline-color);outline-offset:var(--instui-focus-outline-offset)}.instui-billboard.-clickable:active{background:var(--instui-component-billboard-clickable-active-bg);border-style:solid;border-color:var(--instui-color-text-base)}.instui-billboard>.hero{font-size:var(--instui-component-icon-illu-md)}.instui-billboard>.hero[class*=-icon-]{line-height:1}.instui-billboard.-size-sm>.hero,.instui-billboard.-size-small>.hero{font-size:var(--instui-component-icon-illu-sm)}.instui-billboard.-size-md>.hero,.instui-billboard.-size-medium>.hero{font-size:var(--instui-component-icon-illu-md)}.instui-billboard.-size-lg>.hero,.instui-billboard.-size-large>.hero{font-size:var(--instui-component-icon-illu-lg)}@scope(.instui-billboard){:scope>.hero{color:var(--instui-color-text-base);font-size:var(--instui-component-icon-illu-md);justify-content:center;margin-block-end:var(--instui-spacing-space-sm);display:inline-flex}:scope>.hero[class*=-icon-]{line-height:1}:scope.-size-sm>.hero{font-size:var(--instui-component-icon-illu-sm)}:scope.-size-md>.hero,:scope.-size-medium>.hero{font-size:var(--instui-component-icon-illu-md)}:scope.-size-lg>.hero,:scope.-size-large>.hero{font-size:var(--instui-component-icon-illu-lg)}:scope.-size-sm>.hero[class*=-icon-],:scope.-size-small>.hero[class*=-icon-]{font-size:var(--instui-component-icon-illu-sm)}:scope.-size-md>.hero[class*=-icon-],:scope.-size-medium>.hero[class*=-icon-]{font-size:var(--instui-component-icon-illu-md)}:scope.-size-lg>.hero[class*=-icon-],:scope.-size-large>.hero[class*=-icon-]{font-size:var(--instui-component-icon-illu-lg)}:scope>.heading{margin:0 0 var(--instui-spacing-space-xs);color:var(--instui-color-text-base);font-weight:700;font-size:var(--instui-component-text-font-size-x-x-large)}:scope>.message{color:var(--instui-color-text-base);font-size:var(--instui-font-size-text-base)}:scope.-clickable:hover>.hero{color:var(--instui-component-link-text-color)}:scope.-clickable:active>.hero{color:var(--instui-component-link-on-color-text-color)}}.instui-billboard.-size-small{padding:var(--instui-component-billboard-padding-small)}.instui-billboard.-size-medium,.instui-billboard.-size-medium{padding:var(--instui-component-billboard-padding-medium)}.instui-billboard.-size-large{padding:var(--instui-component-billboard-padding-large);margin:var(--instui-component-billboard-large-margin)}.instui-billboard.-size-small .message{font-size:var(--instui-font-size-text-sm)}.instui-billboard.-size-medium .message,.instui-billboard.-size-medium .message{font-size:var(--instui-font-size-text-base)}.instui-billboard.-size-large .message{font-size:1.375rem}.instui-billboard.-size-small>.hero,.instui-billboard.-size-small>.hero{font-size:var(--instui-component-icon-illu-sm)}.instui-billboard.-size-medium>.hero,.instui-billboard.-size-medium>.hero{font-size:var(--instui-component-icon-illu-md)}.instui-billboard.-size-large>.hero,.instui-billboard.-size-large>.hero{font-size:var(--instui-component-icon-illu-lg)}:scope.-size-small>.hero{font-size:var(--instui-component-icon-illu-sm)}:scope.-size-medium>.hero,:scope.-size-medium>.hero{font-size:var(--instui-component-icon-illu-md)}:scope.-size-large>.hero{font-size:var(--instui-component-icon-illu-lg)}:scope.-size-small>.hero[class*=-icon-]{font-size:var(--instui-component-icon-illu-sm)}:scope.-size-medium>.hero[class*=-icon-],:scope.-size-medium>.hero[class*=-icon-]{font-size:var(--instui-component-icon-illu-md)}:scope.-size-large>.hero[class*=-icon-]{font-size:var(--instui-component-icon-illu-lg)}

package/dist/breadcrumb.css

@@ -0,0 +1 @@
+.instui-breadcrumb{align-items:center;gap:var(--instui-component-breadcrumb-gap-md);font-family:var(--instui-component-link-font-family);font-size:var(--instui-component-link-font-size-md);flex-wrap:wrap;display:flex}.instui-breadcrumb.-size-sm{gap:var(--instui-component-breadcrumb-gap-sm);font-size:var(--instui-component-link-font-size-sm)}.instui-breadcrumb.-size-lg{gap:var(--instui-component-breadcrumb-gap-lg);font-size:var(--instui-component-link-font-size-lg)}.instui-breadcrumb.-size-sm .item:not(:last-child):after{margin-inline-start:var(--instui-component-breadcrumb-gap-sm)}.instui-breadcrumb.-size-lg .item:not(:last-child):after{margin-inline-start:var(--instui-component-breadcrumb-gap-lg)}@scope(.instui-breadcrumb){:scope a{color:var(--instui-component-link-text-color);text-decoration:none}:scope a [class*=-icon-]{line-height:1}:scope a:hover{color:var(--instui-component-link-text-hover-color);text-decoration:underline}:scope>.item:not(:last-child):after{content:"/";color:var(--instui-color-text-muted);margin-inline-start:var(--instui-component-breadcrumb-gap-md)}}.instui-breadcrumb.-size-small{gap:var(--instui-component-breadcrumb-gap-sm);font-size:var(--instui-component-link-font-size-sm)}.instui-breadcrumb.-size-large{gap:var(--instui-component-breadcrumb-gap-lg);font-size:var(--instui-component-link-font-size-lg)}.instui-breadcrumb.-size-small .item:not(:last-child):after{margin-inline-start:var(--instui-component-breadcrumb-gap-sm)}.instui-breadcrumb.-size-large .item:not(:last-child):after{margin-inline-start:var(--instui-component-breadcrumb-gap-lg)}

package/dist/button.css

@@ -0,0 +1 @@
+.instui-button{justify-content:center;align-items:center;gap:var(--instui-spacing-space-xs);min-height:var(--instui-component-base-button-medium-height);padding:var(--instui-spacing-space-xs) var(--instui-component-base-button-medium-padding-horizontal);font-family:var(--instui-font-family-base);font-size:var(--instui-component-base-button-medium-font-size);font-weight:var(--instui-font-weight-interactive);line-height:var(--instui-line-height-standalone-text-base);border:var(--instui-border-width-md) solid transparent;border-radius:var(--instui-component-base-button-border-radius);cursor:pointer;background:var(--instui-color-background-interactive-action-primary-base);color:var(--instui-color-text-interactive-action-primary-base);display:inline-flex}.instui-button:hover{background:var(--instui-color-background-interactive-action-primary-hover)}.instui-button:active{background:var(--instui-color-background-interactive-action-primary-active)}.instui-button:disabled,.instui-button[aria-disabled=true]{background:var(--instui-color-background-interactive-action-primary-disabled);color:var(--instui-color-text-interactive-action-primary-disabled);cursor:not-allowed}.instui-button.-color-secondary{background:var(--instui-color-background-interactive-action-secondary-base);color:var(--instui-color-text-interactive-action-secondary-base);border-color:var(--instui-color-stroke-interactive-action-secondary-base)}.instui-button.-color-secondary:hover{background:var(--instui-color-background-interactive-action-secondary-hover);border-color:var(--instui-color-stroke-interactive-action-secondary-hover)}.instui-button.-color-secondary:active{background:var(--instui-color-background-interactive-action-secondary-active);border-color:var(--instui-color-stroke-interactive-action-secondary-active)}.instui-button.-color-danger{background:var(--instui-color-background-interactive-action-destructive-base);color:var(--instui-color-text-interactive-action-status-base)}.instui-button.-color-danger:hover{background:var(--instui-color-background-interactive-action-destructive-hover)}.instui-button.-color-danger:active{background:var(--instui-color-background-interactive-action-destructive-active)}.instui-button.-color-success{background:var(--instui-color-background-interactive-action-success-base);color:var(--instui-color-text-interactive-action-status-base)}.instui-button.-color-success:hover{background:var(--instui-color-background-interactive-action-success-hover)}.instui-button.-color-tertiary{color:var(--instui-color-text-interactive-action-tertiary-base);border-color:var(--instui-color-stroke-interactive-action-tertiary-base);background:0 0}.instui-button.-color-tertiary:hover{background:var(--instui-color-background-interactive-action-tertiary-hover)}.instui-button.-color-tertiary:active{background:var(--instui-color-background-interactive-action-tertiary-active)}.instui-button.-color-primary-inverse{background:var(--instui-component-base-button-primary-inverse-background);color:var(--instui-component-base-button-primary-inverse-color);border-color:var(--instui-component-base-button-primary-inverse-border-color)}.instui-button.-color-primary-inverse:hover{background:var(--instui-component-base-button-primary-inverse-hover-background);border-color:var(--instui-component-base-button-primary-on-color-hover-border-color)}.instui-button.-color-primary-inverse:active{background:var(--instui-component-base-button-primary-inverse-active-background);border-color:var(--instui-component-base-button-primary-on-color-active-border-color)}.instui-button.-color-ai{color:var(--instui-color-text-interactive-action-ai-base);background:linear-gradient(to bottom, var(--instui-color-background-interactive-action-ai-top-gradient-base) 0%, var(--instui-color-background-interactive-action-ai-bottom-gradient-base) 100%) padding-box, linear-gradient(to bottom, var(--instui-color-stroke-interactive-action-ai-top-gradient-base) 0%, var(--instui-color-stroke-interactive-action-ai-bottom-gradient-base) 100%) border-box;border-color:#0000}.instui-button.-color-ai:hover{color:var(--instui-color-text-interactive-action-ai-hover);background:linear-gradient(to bottom, var(--instui-color-background-interactive-action-ai-top-gradient-hover) 0%, var(--instui-color-background-interactive-action-ai-bottom-gradient-hover) 100%) padding-box, linear-gradient(to bottom, var(--instui-color-stroke-interactive-action-ai-top-gradient-hover) 0%, var(--instui-color-stroke-interactive-action-ai-bottom-gradient-hover) 100%) border-box}.instui-button.-color-ai:active{color:var(--instui-color-text-interactive-action-ai-active);background:linear-gradient(to bottom, var(--instui-color-background-interactive-action-ai-top-gradient-active) 0%, var(--instui-color-background-interactive-action-ai-bottom-gradient-active) 100%) padding-box, linear-gradient(to bottom, var(--instui-color-stroke-interactive-action-ai-top-gradient-active) 0%, var(--instui-color-stroke-interactive-action-ai-bottom-gradient-active) 100%) border-box}.instui-button.-color-ai-secondary{background:linear-gradient(to bottom, var(--instui-color-text-interactive-action-ai-secondary-top-gradient-base) 0%, var(--instui-color-text-interactive-action-ai-secondary-bottom-gradient-base) 100%);-webkit-text-fill-color:transparent;color:#0000;-webkit-background-clip:text;background-clip:text;border-color:#0000;position:relative}.instui-button.-color-ai-secondary:after{content:"";inset:calc(-1 * var(--instui-border-width-md));border-radius:inherit;padding:var(--instui-border-width-sm);background:linear-gradient(to bottom, var(--instui-color-stroke-interactive-action-ai-top-gradient-base) 0%, var(--instui-color-stroke-interactive-action-ai-bottom-gradient-base) 100%);-webkit-mask-composite:xor;pointer-events:none;position:absolute;-webkit-mask-image:linear-gradient(#fff 0 0),linear-gradient(#fff 0 0);mask-image:linear-gradient(#fff 0 0),linear-gradient(#fff 0 0);-webkit-mask-position:0 0,0 0;mask-position:0 0,0 0;-webkit-mask-size:auto,auto;mask-size:auto,auto;-webkit-mask-repeat:repeat,repeat;mask-repeat:repeat,repeat;-webkit-mask-clip:content-box,border-box;mask-clip:content-box,border-box;-webkit-mask-origin:content-box,border-box;mask-origin:content-box,border-box;mask-composite:exclude;mask-mode:match-source,match-source}.instui-button.-color-ai-secondary:hover,.instui-button.-color-ai-secondary:active{color:var(--instui-color-text-interactive-action-ai-secondary-top-gradient-base);-webkit-text-fill-color:currentColor;-webkit-background-clip:border-box;background-clip:border-box}.instui-button.-color-ai-secondary:hover{background:linear-gradient(to bottom, var(--instui-color-background-interactive-action-ai-secondary-hover-top-gradient) 0%, var(--instui-color-background-interactive-action-ai-secondary-hover-bottom-gradient) 100%)}.instui-button.-color-ai-secondary:active{background:linear-gradient(to bottom, var(--instui-color-background-interactive-action-ai-secondary-active-top-gradient) 0%, var(--instui-color-background-interactive-action-ai-secondary-active-bottom-gradient) 100%)}.instui-button.-color-ai:before,.instui-button.-color-ai-secondary:before{content:"";flex:none;block-size:1em;inline-size:1em;-webkit-mask:url("data:image/svg+xml,%3Csvg viewBox='0 0 1920 1920' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M960 0L1219.29 700.713L1920 960L1219.29 1219.29L960 1920L700.713 1219.29L0 960L700.713 700.713L960 0Z'/%3E%3Cpath d='M1600 0L1686.43 233.571L1920 320L1686.43 406.429L1600 640L1513.57 406.429L1280 320L1513.57 233.571L1600 0Z'/%3E%3C/svg%3E") 50%/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg viewBox='0 0 1920 1920' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M960 0L1219.29 700.713L1920 960L1219.29 1219.29L960 1920L700.713 1219.29L0 960L700.713 700.713L960 0Z'/%3E%3Cpath d='M1600 0L1686.43 233.571L1920 320L1686.43 406.429L1600 640L1513.57 406.429L1280 320L1513.57 233.571L1600 0Z'/%3E%3C/svg%3E") 50%/contain no-repeat}.instui-button.-color-ai:before{background:var(--instui-color-text-interactive-action-ai-base)}.instui-button.-color-ai-secondary:before{background:linear-gradient(to bottom, var(--instui-color-stroke-interactive-action-ai-top-gradient-base) 0%, var(--instui-color-stroke-interactive-action-ai-bottom-gradient-base) 100%)}.instui-button.-without-background{background:var(--instui-component-base-button-primary-ghost-background);color:var(--instui-component-base-button-primary-ghost-color);border-color:var(--instui-component-base-button-primary-ghost-border-color)}.instui-button.-color-secondary.-ghost{background:var(--instui-component-base-button-secondary-ghost-background);color:var(--instui-component-base-button-secondary-ghost-color);border-color:var(--instui-component-base-button-secondary-ghost-border-color)}.instui-button.-without-background:hover{background:color-mix(in srgb, hsl(from var(--instui-component-base-button-primary-ghost-color) h s calc(l - 10)) 10%, transparent)}.instui-button.-without-background:active{background:color-mix(in srgb, hsl(from var(--instui-component-base-button-primary-ghost-color) h s calc(l - 10)) 20%, transparent)}.instui-button.-color-secondary.-ghost:hover{background:color-mix(in srgb, hsl(from var(--instui-component-base-button-secondary-ghost-color) h s calc(l - 10)) 10%, transparent)}.instui-button.-color-secondary.-ghost:active{background:color-mix(in srgb, hsl(from var(--instui-component-base-button-secondary-ghost-color) h s calc(l - 10)) 20%, transparent)}.instui-button.-display-block{width:100%;display:flex}.instui-button.-size-sm{font-size:var(--instui-component-base-button-small-font-size);min-height:var(--instui-component-base-button-small-height);padding-inline:var(--instui-component-base-button-small-padding-horizontal)}.instui-button.-size-lg{font-size:var(--instui-component-base-button-large-font-size);min-height:var(--instui-component-base-button-large-height);padding-inline:var(--instui-component-base-button-large-padding-horizontal)}.instui-button.-shape-square{padding:var(--instui-spacing-space-xs);aspect-ratio:1}.instui-button.-shape-circle{padding:var(--instui-spacing-space-xs);aspect-ratio:1;border-radius:50%}.instui-button.-shape-square[class*=-icon-]:before,.instui-button.-shape-circle[class*=-icon-]:before{block-size:1.25em;inline-size:1.25em}.instui-button.-condensed{min-height:0;color:var(--instui-color-text-interactive-action-secondary-base);padding-inline:var(--instui-spacing-space-xs);background:0 0;border-color:#0000}.instui-button.-condensed:hover{background:var(--instui-color-background-muted)}.instui-button.-toggle[aria-pressed=true]{background:var(--instui-color-background-interactive-action-secondary-active);border-color:var(--instui-color-stroke-interactive-action-secondary-active);color:var(--instui-color-text-interactive-action-secondary-base)}.instui-button.-without-border{border-style:none}.instui-button.-size-small{font-size:var(--instui-component-base-button-small-font-size);min-height:var(--instui-component-base-button-small-height);padding-inline:var(--instui-component-base-button-small-padding-horizontal)}.instui-button.-size-large{font-size:var(--instui-component-base-button-large-font-size);min-height:var(--instui-component-base-button-large-height);padding-inline:var(--instui-component-base-button-large-padding-horizontal)}

package/dist/byline.css

@@ -0,0 +1 @@
+.instui-byline{align-items:center;gap:var(--instui-component-byline-figure-margin);background:var(--instui-component-byline-background);color:var(--instui-component-byline-color);font-family:var(--instui-component-byline-font-family);display:flex}.instui-byline.-align-content-top{align-items:flex-start}.instui-byline.-align-content-center{align-items:center}.instui-byline.-size-sm{max-width:var(--instui-component-byline-small,20rem)}.instui-byline.-size-md{max-width:var(--instui-component-byline-medium,30rem)}.instui-byline.-size-lg{max-width:var(--instui-component-byline-large,40rem)}@scope(.instui-byline){:scope>[class*=-icon-]{line-height:1}.title{margin:0 0 var(--instui-component-byline-title-margin);font-size:var(--instui-component-byline-title-font-size);font-weight:var(--instui-component-byline-title-font-weight);line-height:var(--instui-component-byline-title-line-height)}.description{font-size:var(--instui-component-byline-description-font-size);font-weight:var(--instui-component-byline-description-font-weight);line-height:var(--instui-component-byline-description-line-height)}}.instui-byline.-size-small{max-width:var(--instui-component-byline-small,20rem)}.instui-byline.-size-medium{max-width:var(--instui-component-byline-medium,30rem)}.instui-byline.-size-large{max-width:var(--instui-component-byline-large,40rem)}

package/dist/calendar.css

@@ -0,0 +1 @@
+.instui-calendar{text-align:center;background:var(--instui-component-calendar-background);color:var(--instui-component-calendar-color);font-family:var(--instui-component-calendar-font-family);font-size:var(--instui-component-calendar-font-size);font-weight:var(--instui-component-calendar-font-weight);line-height:var(--instui-component-calendar-line-height);display:inline-block}@scope(.instui-calendar){:scope>.nav{justify-content:space-between;align-items:center;margin-block-end:var(--instui-component-calendar-nav-margin);display:flex}:scope>.grid{grid-template-columns:repeat(7, var(--instui-component-calendar-day-min-width));justify-content:center;gap:var(--instui-spacing-space2xs);display:grid}.weekday,.day{inline-size:var(--instui-component-calendar-day-min-width);block-size:var(--instui-component-calendar-day-height);justify-content:center;align-items:center;display:flex}.weekday{font-weight:var(--instui-font-weight-interactive)}.day{font-size:var(--instui-component-calendar-day-font-size);color:var(--instui-component-calendar-day-color);background:var(--instui-component-calendar-day-background);cursor:pointer}.day.-outside-month{color:var(--instui-component-calendar-day-outside-month-color)}.day.-today{background:var(--instui-component-calendar-day-today-background);color:var(--instui-component-calendar-day-today-color);border-radius:var(--instui-component-calendar-day-today-border-radius)}.day.-selected{background:var(--instui-component-calendar-day-selected-background);color:var(--instui-component-calendar-day-selected-color);border-radius:var(--instui-component-calendar-day-selected-border-radius)}}

package/dist/checkbox.css

@@ -0,0 +1 @@
+.instui-checkbox{align-items:center;gap:var(--instui-component-checkbox-gap);color:var(--instui-component-checkbox-label-base-color);font-family:var(--instui-component-checkbox-font-family);font-size:var(--instui-component-checkbox-font-size-md);font-weight:var(--instui-component-checkbox-font-weight);line-height:var(--instui-component-checkbox-line-height);display:inline-flex}.instui-checkbox.-label-placement-end{flex-direction:row}.instui-checkbox.-label-placement-start{flex-direction:row-reverse}.instui-checkbox.-label-placement-top{flex-direction:column-reverse;align-items:flex-start}.instui-checkbox:not(.instui-checkbox.-variant-toggle) input[type=checkbox]{-webkit-appearance:none;appearance:none;width:var(--instui-component-checkbox-control-size-md);height:var(--instui-component-checkbox-control-size-md);margin-block:var(--instui-component-checkbox-control-vertical-margin);border:var(--instui-component-checkbox-border-width) solid var(--instui-component-checkbox-border-color);border-radius:var(--instui-component-checkbox-border-radius);background:var(--instui-component-checkbox-background-color);cursor:pointer;--pantoken-cb-glyph:var(--instui-icon-check) center / contain no-repeat;flex:none;place-content:center;transition:background-color .15s,border-color .15s;display:inline-grid}.instui-checkbox:not(.instui-checkbox.-variant-toggle) input[type=checkbox]:before{content:"";background:oklch(from var(--instui-component-checkbox-background-checked-color) clamp(0, (.62 - l) * infinity, 1) 0 0);width:.75em;height:.75em;-webkit-mask:var(--pantoken-cb-glyph);mask:var(--pantoken-cb-glyph);transition:transform .1s;transform:scale(0)}.instui-checkbox:not(.instui-checkbox.-variant-toggle) input[type=checkbox]:hover{border-color:var(--instui-component-checkbox-border-hover-color);background:var(--instui-component-checkbox-background-hover-color)}.instui-checkbox:not(.instui-checkbox.-variant-toggle) input[type=checkbox]:checked,.instui-checkbox:not(.instui-checkbox.-variant-toggle) input[type=checkbox]:indeterminate{border-color:var(--instui-component-checkbox-border-checked-color);background:var(--instui-component-checkbox-background-checked-color)}.instui-checkbox:not(.instui-checkbox.-variant-toggle) input[type=checkbox]:checked:before,.instui-checkbox:not(.instui-checkbox.-variant-toggle) input[type=checkbox]:indeterminate:before{transform:scale(1)}.instui-checkbox:not(.instui-checkbox.-variant-toggle) input[type=checkbox]:indeterminate{--pantoken-cb-glyph:var(--instui-icon-minus) center / contain no-repeat}.instui-checkbox:not(.instui-checkbox.-variant-toggle) input[type=checkbox]:disabled{border-color:var(--instui-component-checkbox-border-disabled-color);background:var(--instui-component-checkbox-background-disabled-color);cursor:not-allowed}.instui-checkbox:has(input:disabled){color:var(--instui-component-checkbox-label-disabled-color)}.instui-checkbox:hover{color:var(--instui-component-checkbox-label-hover-color)}.instui-checkbox.-size-sm{font-size:var(--instui-component-checkbox-font-size-sm)}.instui-checkbox:not(.instui-checkbox.-variant-toggle).instui-checkbox.-size-sm input[type=checkbox]{width:var(--instui-component-checkbox-control-size-sm);height:var(--instui-component-checkbox-control-size-sm)}.instui-checkbox.-size-lg{font-size:var(--instui-component-checkbox-font-size-lg)}.instui-checkbox:not(.instui-checkbox.-variant-toggle).instui-checkbox.-size-lg input[type=checkbox]{width:var(--instui-component-checkbox-control-size-lg);height:var(--instui-component-checkbox-control-size-lg)}.instui-checkbox:not(.instui-checkbox.-variant-toggle).instui-checkbox.-invalid input[type=checkbox]{border-color:var(--instui-component-checkbox-error-border-color)}.instui-checkbox:not(.instui-checkbox.-variant-toggle).instui-checkbox.-invalid input[type=checkbox]:hover{border-color:var(--instui-component-checkbox-error-border-hover-color)}.instui-checkbox.-readonly{color:var(--instui-component-checkbox-label-readonly-color)}.instui-checkbox:not(.instui-checkbox.-variant-toggle).instui-checkbox.-readonly input[type=checkbox]{border-color:var(--instui-component-checkbox-border-readonly-color);background:var(--instui-component-checkbox-background-readonly-color)}@scope(.instui-checkbox){:scope.-required .asterisk{color:var(--instui-component-checkbox-asterisk-color)}}.instui-checkbox.-variant-toggle input[type=checkbox]{--pantoken-toggle-h:var(--instui-size-choice-control-height-md);--pantoken-toggle-w:var(--instui-component-radio-input-toggle-medium-height);--pantoken-toggle-bw:var(--instui-border-width-sm);--pantoken-toggle-inset:calc(var(--pantoken-toggle-bw) * 3);--pantoken-toggle-handle:calc(var(--pantoken-toggle-h) - var(--pantoken-toggle-inset) * 2);-webkit-appearance:none;appearance:none;width:var(--pantoken-toggle-w);height:var(--pantoken-toggle-h);border-radius:var(--pantoken-toggle-h);box-shadow:inset 0 0 0 var(--pantoken-toggle-bw) var(--instui-color-stroke-base);background:var(--instui-color-background-muted);cursor:pointer;border:0;transition:background-color .15s;position:relative}.instui-checkbox.-variant-toggle input[type=checkbox]:before{content:"";box-sizing:border-box;width:var(--pantoken-toggle-handle);height:var(--pantoken-toggle-handle);border:var(--pantoken-toggle-bw) solid var(--instui-color-stroke-base);background:var(--instui-component-radio-input-toggle-handle-text);top:50%;border-radius:50%;transition:inset-inline-start .15s;position:absolute;inset-inline-start:var(--pantoken-toggle-inset);transform:translateY(-50%)}.instui-checkbox.-variant-toggle input[type=checkbox]:after{content:"";width:var(--pantoken-toggle-handle);height:var(--pantoken-toggle-handle);background:var(--instui-color-text-muted);-webkit-mask:var(--instui-icon-x) center / 58% no-repeat;mask:var(--instui-icon-x) center / 58% no-repeat;top:50%;transition:inset-inline-start .15s;position:absolute;inset-inline-start:var(--pantoken-toggle-inset);transform:translateY(-50%)}.instui-checkbox.-variant-toggle input[type=checkbox]:checked{background:var(--instui-component-radio-input-toggle-background-success)}.instui-checkbox.-variant-toggle input[type=checkbox]:checked:before{border-color:var(--instui-component-radio-input-toggle-background-success);inset-inline-start:calc(100% - var(--pantoken-toggle-h) + var(--pantoken-toggle-inset))}.instui-checkbox.-variant-toggle input[type=checkbox]:checked:after{background:var(--instui-component-radio-input-toggle-background-success);-webkit-mask:var(--instui-icon-check) center / 58% no-repeat;mask:var(--instui-icon-check) center / 58% no-repeat;inset-inline-start:calc(100% - var(--pantoken-toggle-h) + var(--pantoken-toggle-inset))}.instui-checkbox.-size-small{font-size:var(--instui-component-checkbox-font-size-sm)}.instui-checkbox:not(.instui-checkbox.-variant-toggle).instui-checkbox.-size-small input[type=checkbox]{width:var(--instui-component-checkbox-control-size-sm);height:var(--instui-component-checkbox-control-size-sm)}.instui-checkbox.-size-large{font-size:var(--instui-component-checkbox-font-size-lg)}.instui-checkbox:not(.instui-checkbox.-variant-toggle).instui-checkbox.-size-large input[type=checkbox]{width:var(--instui-component-checkbox-control-size-lg);height:var(--instui-component-checkbox-control-size-lg)}

package/dist/close-button.css

@@ -0,0 +1 @@
+.instui-close-button{aspect-ratio:1;min-height:var(--instui-component-base-button-medium-height);padding:var(--instui-spacing-space-xs);border-radius:var(--instui-component-base-button-border-radius);color:var(--instui-color-text-interactive-action-secondary-base);cursor:pointer;background:0 0;border:0;justify-content:center;align-items:center;display:inline-flex}.instui-close-button:before{content:"";block-size:1em;inline-size:1em;-webkit-mask:var(--instui-icon-x) center / contain no-repeat;mask:var(--instui-icon-x) center / contain no-repeat;background:currentColor}.instui-close-button:hover{background:var(--instui-color-background-interactive-action-tertiary-hover)}.instui-close-button:active{background:var(--instui-color-background-interactive-action-tertiary-active)}.instui-close-button.-size-sm{min-height:var(--instui-component-base-button-small-height)}.instui-close-button.-size-lg{min-height:var(--instui-component-base-button-large-height)}.instui-close-button.-color-inverse{color:var(--instui-component-base-button-primary-inverse-ghost-color)}.instui-close-button.-size-small{min-height:var(--instui-component-base-button-small-height)}.instui-close-button.-size-large{min-height:var(--instui-component-base-button-large-height)}