@latty-ds/web 0.8.1 → 0.10.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/custom-elements.json +103 -33
- package/dist/components/accordion/index.js +44 -8
- package/dist/components/alert/index.js +72 -8
- package/dist/components/avatar/index.js +1 -1
- package/dist/components/badge/index.js +1 -1
- package/dist/components/breadcrumb/index.js +1 -1
- package/dist/components/button/button.d.ts +6 -0
- package/dist/components/button/index.js +29 -1
- package/dist/components/calendar/index.js +1 -1
- package/dist/components/checkbox/index.js +1 -1
- package/dist/components/chip/index.js +1 -1
- package/dist/components/color-input/index.js +44 -8
- package/dist/components/combobox/index.js +44 -8
- package/dist/components/date-input/index.js +45 -9
- package/dist/components/datepicker/index.js +44 -8
- package/dist/components/dialog/dialog.d.ts +11 -0
- package/dist/components/dialog/index.js +83 -10
- package/dist/components/divider/index.js +1 -1
- package/dist/components/dropdown/dropdown.d.ts +2 -0
- package/dist/components/dropdown/index.js +4 -3
- package/dist/components/icon-button/icon-button.d.ts +6 -0
- package/dist/components/icon-button/index.js +28 -0
- package/dist/components/list/index.js +1 -1
- package/dist/components/pagination/index.js +1 -1
- package/dist/components/radio/index.js +1 -1
- package/dist/components/radio-group/index.js +44 -8
- package/dist/components/select/index.js +54 -10
- package/dist/components/sidepanel/index.js +76 -11
- package/dist/components/sidepanel/sidepanel.d.ts +2 -0
- package/dist/components/slider/index.js +44 -8
- package/dist/components/snackbar/index.js +11 -3
- package/dist/components/snackbar/snackbar.d.ts +11 -0
- package/dist/components/surface/index.js +1 -1
- package/dist/components/switch/index.js +1 -1
- package/dist/components/tab/index.js +1 -1
- package/dist/components/tab-group/index.js +2 -2
- package/dist/components/table/index.js +1 -1
- package/dist/components/text/index.js +43 -7
- package/dist/components/text/text.d.ts +1 -0
- package/dist/components/textfield/index.js +44 -8
- package/dist/components/tooltip/index.js +43 -7
- package/dist/index.cjs +163 -44
- package/dist/index.js +163 -44
- package/dist/manifest.json +36 -0
- package/package.json +3 -3
package/custom-elements.json
CHANGED
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
{
|
|
10
10
|
"kind": "variable",
|
|
11
11
|
"name": "accordionStyles",
|
|
12
|
-
"default": "css` :host { display: block; font-family: var(--lt-typography-
|
|
12
|
+
"default": "css` :host { display: block; font-family: var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif); width: 100%; } details { border-radius: var(--lt-border-radius); transition: background-color 120ms ease, border-color 120ms ease; } summary { cursor: pointer; list-style: none; user-select: none; border-radius: var(--lt-border-radius); overflow: hidden; } summary::-webkit-details-marker { display: none; } .summary-content { align-items: center; display: flex; gap: var(--lt-spacing-3); justify-content: space-between; padding: var(--lt-accordion-summary-padding, var(--lt-spacing-4)); } .start-icon { color: var(--lt-text-subtle); flex-shrink: 0; font-size: 1.25rem; } .summary-text { color: var(--lt-accordion-header-color, var(--lt-text-default)); flex: 1; } .summary-text::part(base) { font-size: var(--lt-accordion-header-font-size, 1rem); font-weight: var(--lt-accordion-header-font-weight, 600); } .chevron { color: var(--lt-text-subtle); flex-shrink: 0; height: 20px; transition: transform 200ms ease; width: 20px; } details[open] .chevron { transform: rotate(180deg); } summary:hover .chevron { color: var(--lt-text-default); } summary:focus-visible { outline: 2px solid var(--lt-border-focus); outline-offset: 2px; border-radius: var(--lt-border-radius); } .content { height: 0; overflow: hidden; transition: height 200ms ease; } .content-inner { color: var(--lt-text-subtle); font-size: 0.9375rem; line-height: 1.6; padding: var(--lt-accordion-content-padding, 0 var(--lt-spacing-4) var(--lt-spacing-4)); } /* Variant: default */ :host([appearance='default']) details { background: var(--lt-bg-subtle); border: var(--lt-border-width, 1px) solid var(--lt-border-default); } :host([appearance='default']) details:hover { border-color: var(--lt-border-strong); } /* Variant: filled */ :host([appearance='filled']) details { background: var(--lt-bg-surface); border: none; } :host([appearance='filled']) details:hover { background: var(--lt-bg-overlay); } /* Variant: outlined */ :host([appearance='outlined']) details { background: transparent; border: var(--lt-border-width, 1px) solid var(--lt-border-default); } :host([appearance='outlined']) details:hover { border-color: var(--lt-border-strong); } /* Variant: clean */ :host([appearance='clean']) details { background: transparent; border: none; } /* Disabled state */ :host([disabled]) details { opacity: 0.6; pointer-events: none; } :host([uppercase]) .summary-text::part(base) { font-variant-caps: small-caps; letter-spacing: 0.05rem; text-transform: lowercase; } `"
|
|
13
13
|
}
|
|
14
14
|
],
|
|
15
15
|
"exports": [
|
|
@@ -231,7 +231,7 @@
|
|
|
231
231
|
{
|
|
232
232
|
"kind": "variable",
|
|
233
233
|
"name": "alertStyles",
|
|
234
|
-
"default": "css` :host { display: block; font-family: var(--lt-typography-
|
|
234
|
+
"default": "css` :host { display: block; font-family: var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif); opacity: 1; transform: translateY(0); transition: opacity 200ms ease, transform 200ms ease; /* Default variant tokens — public props override first, then variant defaults */ --_bg-subtle: var(--lt-alert-bg, var(--lt-bg-neutral-subtle)); --_bg-solid: var(--lt-alert-bg, var(--lt-bg-inverse)); --_border: var(--lt-alert-border-color, var(--lt-border-strong)); --_color: var(--lt-alert-color, var(--lt-text-default)); --_color-solid: var(--lt-alert-color, var(--lt-text-inverse)); } :host([dismissed]) { opacity: 0; transform: translateY(-4px); } /* ── Per-variant tokens ──────────────────────────────────── */ :host([variant='success']) { --_bg-subtle: var(--lt-alert-bg, var(--lt-bg-success-subtle)); --_bg-solid: var(--lt-alert-bg, var(--lt-bg-success)); --_border: var(--lt-alert-border-color, var(--lt-border-success-strong)); --_color: var(--lt-alert-color, var(--lt-text-success)); --_color-solid: var(--lt-alert-color, var(--lt-text-on-success)); } :host([variant='warning']) { --_bg-subtle: var(--lt-alert-bg, var(--lt-bg-warning-subtle)); --_bg-solid: var(--lt-alert-bg, var(--lt-bg-warning)); --_border: var(--lt-alert-border-color, var(--lt-border-warning-strong)); --_color: var(--lt-alert-color, var(--lt-text-warning)); --_color-solid: var(--lt-alert-color, var(--lt-text-on-warning)); } :host([variant='error']) { --_bg-subtle: var(--lt-alert-bg, var(--lt-bg-error-subtle)); --_bg-solid: var(--lt-alert-bg, var(--lt-bg-error)); --_border: var(--lt-alert-border-color, var(--lt-border-error-strong)); --_color: var(--lt-alert-color, var(--lt-text-error)); --_color-solid: var(--lt-alert-color, var(--lt-text-on-error)); } :host([variant='info']) { --_bg-subtle: var(--lt-alert-bg, var(--lt-bg-info-subtle)); --_bg-solid: var(--lt-alert-bg, var(--lt-bg-info)); --_border: var(--lt-alert-border-color, var(--lt-border-info-strong)); --_color: var(--lt-alert-color, var(--lt-text-info)); --_color-solid: var(--lt-alert-color, var(--lt-text-on-info)); } /* ── Layout ──────────────────────────────────────────────── */ .inner { align-items: flex-start; border-radius: var(--lt-border-radius); display: flex; gap: var(--lt-spacing-3); padding: var(--lt-spacing-3) var(--lt-spacing-4); } /* ── Appearances ─────────────────────────────────────────── */ /* filled (default) — subtle tinted bg + full border */ :host([appearance='filled']) .inner, :host(:not([appearance])) .inner { background: var(--_bg-subtle); border: var(--lt-border-width, 1px) solid var(--_border); color: var(--_color); } /* outlined — white bg + colored border */ :host([appearance='outlined']) .inner { background: var(--lt-bg-default); border: var(--lt-border-width, 1px) solid var(--_border); color: var(--_color); } /* solid — solid color bg, no border */ :host([appearance='solid']) .inner { background: var(--_bg-solid); border: none; color: var(--_color-solid); } /* ── Icon ────────────────────────────────────────────────── */ .icon { flex-shrink: 0; font-size: 1.125rem; margin-top: 1px; } /* ── Body ────────────────────────────────────────────────── */ .body { flex: 1; min-width: 0; } .title { margin: 0 0 var(--lt-spacing-1); } .content { font-size: 0.875rem; line-height: 1.5; } .title + .content { opacity: 0.8; } /* ── Close button ────────────────────────────────────────── */ .close { flex-shrink: 0; margin-top: 1px; opacity: 0.7; } .close:hover { opacity: 1; } :host([uppercase]) .title::part(base) { font-variant-caps: small-caps; letter-spacing: 0.05rem; text-transform: lowercase; } `"
|
|
235
235
|
}
|
|
236
236
|
],
|
|
237
237
|
"exports": [
|
|
@@ -422,7 +422,7 @@
|
|
|
422
422
|
{
|
|
423
423
|
"kind": "variable",
|
|
424
424
|
"name": "avatarStyles",
|
|
425
|
-
"default": "css` :host { display: inline-flex; flex-shrink: 0; vertical-align: middle; } span[part='base'] { align-items: center; background: var(--lt-avatar-bg, var(--lt-bg-overlay)); box-sizing: border-box; color: var(--lt-avatar-color, var(--lt-color-neutral-700)); display: inline-flex; justify-content: center; overflow: hidden; position: relative; } img[part='image'] { height: 100%; object-fit: cover; width: 100%; } .initials { font-family: var(--lt-typography-
|
|
425
|
+
"default": "css` :host { display: inline-flex; flex-shrink: 0; vertical-align: middle; } span[part='base'] { align-items: center; background: var(--lt-avatar-bg, var(--lt-bg-overlay)); box-sizing: border-box; color: var(--lt-avatar-color, var(--lt-color-neutral-700)); display: inline-flex; justify-content: center; overflow: hidden; position: relative; } img[part='image'] { height: 100%; object-fit: cover; width: 100%; } .initials { font-family: var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif); font-weight: 600; letter-spacing: 0.02em; line-height: 1; user-select: none; } /* ── Colors (fallback bg + text) ────────────────────────────────────── */ :host([color='neutral']) span[part='base'] { background: var(--lt-bg-overlay); color: var(--lt-text-neutral); } :host([color='primary']) span[part='base'] { background: var(--lt-bg-primary-subtle); color: var(--lt-text-primary); } :host([color='secondary']) span[part='base'] { background: var(--lt-bg-secondary-subtle); color: var(--lt-text-secondary); } :host([color='success']) span[part='base'] { background: var(--lt-bg-success-subtle); color: var(--lt-text-success); } :host([color='warning']) span[part='base'] { background: var(--lt-bg-warning-subtle); color: var(--lt-text-warning); } :host([color='error']) span[part='base'] { background: var(--lt-bg-error-subtle); color: var(--lt-text-error); } :host([color='info']) span[part='base'] { background: var(--lt-bg-info-subtle); color: var(--lt-text-info); } /* ── Shape ───────────────────────────────────────────────────────────── */ :host([shape='circle']) span[part='base'] { border-radius: 999px; } :host([shape='square']) span[part='base'] { border-radius: var(--lt-border-radius); } /* ── Sizes ───────────────────────────────────────────────────────────── */ :host([size='xs']) span[part='base'] { height: 24px; width: 24px; } :host([size='xs']) .initials { font-size: 0.625rem; } :host([size='sm']) span[part='base'] { height: 32px; width: 32px; } :host([size='sm']) .initials { font-size: 0.75rem; } :host([size='md']) span[part='base'] { height: 40px; width: 40px; } :host([size='md']) .initials { font-size: 0.9375rem; } :host([size='lg']) span[part='base'] { height: 52px; width: 52px; } :host([size='lg']) .initials { font-size: 1.125rem; } :host([size='xl']) span[part='base'] { height: 68px; width: 68px; } :host([size='xl']) .initials { font-size: 1.5rem; } `"
|
|
426
426
|
}
|
|
427
427
|
],
|
|
428
428
|
"exports": [
|
|
@@ -598,7 +598,7 @@
|
|
|
598
598
|
{
|
|
599
599
|
"kind": "variable",
|
|
600
600
|
"name": "badgeStyles",
|
|
601
|
-
"default": "css` :host { display: inline-flex; font-family: var(--lt-typography-
|
|
601
|
+
"default": "css` :host { display: inline-flex; font-family: var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif); vertical-align: middle; } span[part='base'] { align-items: center; background: var(--lt-badge-bg); border-radius: 999px; /* Badges are even smaller than chips (as short as 18px at size=\"sm\") — a \"thick\" (4px) themed border reads as compressed, so cap what the badge actually renders at \"medium\" (2px) regardless of the theme's configured border width. */ border: min(var(--lt-border-width, 1px), 2px) solid var(--lt-badge-border-color, transparent); color: var(--lt-badge-color); box-sizing: border-box; display: inline-flex; font-weight: 600; gap: var(--lt-spacing-1); line-height: 1; user-select: none; white-space: nowrap; } .dot { border-radius: 50%; flex-shrink: 0; } /* ── Sizes ──────────────────────────────────────────────────────────── */ :host([size='sm']) span[part='base'] { font-size: 0.6875rem; height: 18px; padding-inline: var(--lt-spacing-2); } :host([size='sm']) .dot { height: 6px; width: 6px; } :host([size='md']) span[part='base'] { font-size: 0.75rem; height: 22px; padding-inline: var(--lt-spacing-2); } :host([size='md']) .dot { height: 7px; width: 7px; } :host([size='lg']) span[part='base'] { font-size: 0.8125rem; height: 26px; padding-inline: var(--lt-spacing-3); } :host([size='lg']) .dot { height: 8px; width: 8px; } /* When dot is the only content, fill it to the circle size */ :host([dot][content='']) .dot, :host([dot]:not([content])) .dot { height: 40%; width: 40%; } /* ── Empty = perfect circle (covers content=\"\" and absent attribute) */ :host([content='']) span[part='base'], :host(:not([content])) span[part='base'] { aspect-ratio: 1; justify-content: center; padding: 0; } /* ── Filled (tinted bg, colored border, dark text) ───────────────── */ :host([appearance='filled'][variant='primary']) span[part='base'] { background: var(--lt-bg-primary-subtle); border-color: var(--lt-border-primary); color: var(--lt-text-primary); } :host([appearance='filled'][variant='secondary']) span[part='base'] { background: var(--lt-bg-secondary-subtle); border-color: var(--lt-border-secondary); color: var(--lt-text-secondary); } :host([appearance='filled'][variant='success']) span[part='base'] { background: var(--lt-bg-success-subtle); border-color: var(--lt-border-success); color: var(--lt-text-success); } :host([appearance='filled'][variant='warning']) span[part='base'] { background: var(--lt-bg-warning-subtle); border-color: var(--lt-border-warning); color: var(--lt-text-warning); } :host([appearance='filled'][variant='error']) span[part='base'] { background: var(--lt-bg-error-subtle); border-color: var(--lt-border-error); color: var(--lt-text-error); } :host([appearance='filled'][variant='neutral']) span[part='base'] { background: var(--lt-bg-surface); border-color: var(--lt-border-default); color: var(--lt-text-neutral); } /* ── Outlined (transparent bg, colored border and text) ──────────── */ :host([appearance='outlined'][variant='primary']) span[part='base'] { background: transparent; border-color: var(--lt-border-primary-strong); color: var(--lt-text-primary); } :host([appearance='outlined'][variant='secondary']) span[part='base'] { background: transparent; border-color: var(--lt-border-secondary-strong); color: var(--lt-text-secondary); } :host([appearance='outlined'][variant='success']) span[part='base'] { background: transparent; border-color: var(--lt-border-success-strong); color: var(--lt-text-success); } :host([appearance='outlined'][variant='warning']) span[part='base'] { background: transparent; border-color: var(--lt-border-warning-strong); color: var(--lt-text-warning); } :host([appearance='outlined'][variant='error']) span[part='base'] { background: transparent; border-color: var(--lt-border-error-strong); color: var(--lt-text-error); } :host([appearance='outlined'][variant='neutral']) span[part='base'] { background: transparent; border-color: var(--lt-border-strong); color: var(--lt-text-neutral); } /* ── Solid (full-color bg, white text) ───────────────────────────── */ :host([appearance='solid'][variant='primary']) span[part='base'] { background: var(--lt-interactive-primary-bg); border-color: transparent; color: var(--lt-text-on-primary); } :host([appearance='solid'][variant='secondary']) span[part='base'] { background: var(--lt-interactive-secondary-bg); border-color: transparent; color: var(--lt-text-on-secondary); } :host([appearance='solid'][variant='success']) span[part='base'] { background: var(--lt-interactive-success-bg); border-color: transparent; color: var(--lt-text-on-success); } :host([appearance='solid'][variant='warning']) span[part='base'] { background: var(--lt-interactive-warning-bg); border-color: transparent; color: var(--lt-text-on-warning); } :host([appearance='solid'][variant='error']) span[part='base'] { background: var(--lt-interactive-error-bg); border-color: transparent; color: var(--lt-text-on-error); } :host([appearance='solid'][variant='neutral']) span[part='base'] { background: var(--lt-color-neutral-500); border-color: transparent; color: var(--lt-color-white); } /* ── Dot color inherits text color ───────────────────────────────── */ .dot { background: currentColor; } `"
|
|
602
602
|
}
|
|
603
603
|
],
|
|
604
604
|
"exports": [
|
|
@@ -747,7 +747,7 @@
|
|
|
747
747
|
{
|
|
748
748
|
"kind": "variable",
|
|
749
749
|
"name": "breadcrumbItemStyles",
|
|
750
|
-
"default": "css` :host { align-items: center; display: inline-flex; font-family: var(--lt-typography-
|
|
750
|
+
"default": "css` :host { align-items: center; display: inline-flex; font-family: var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif); font-size: 0.875rem; } [part='link'] { color: var(--lt-interactive-primary-bg); text-decoration: none; transition: color 120ms ease; } [part='link']:hover { color: var(--lt-interactive-primary-bg-hover); text-decoration: underline; } [part='text'] { color: var(--lt-text-default); font-weight: 600; } [part='separator'] { color: var(--lt-text-muted); margin-inline: var(--lt-spacing-2); user-select: none; } [part='separator']::after { content: var(--lt-breadcrumb-separator, '/'); } :host(:last-child) [part='separator'] { display: none; } `"
|
|
751
751
|
}
|
|
752
752
|
],
|
|
753
753
|
"exports": [
|
|
@@ -925,7 +925,7 @@
|
|
|
925
925
|
{
|
|
926
926
|
"kind": "variable",
|
|
927
927
|
"name": "buttonStyles",
|
|
928
|
-
"default": "css` :host { display: inline-block; font-family: var(--lt-typography-
|
|
928
|
+
"default": "css` :host { display: inline-block; font-family: var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif); /* Internal state props — set per variant/appearance below */ --_color: var(--lt-text-on-primary); --_bg: var(--lt-interactive-primary-bg); --_border-color: transparent; --_hover-bg: var(--lt-interactive-primary-bg-hover); --_active-bg: var(--lt-interactive-primary-bg-active); } :host([full-width]) { display: block; width: 100%; } :host([full-width]) [part='base'] { width: 100%; } [part='base'] { align-items: center; background: var(--lt-button-bg, var(--_bg)); border-radius: var(--lt-border-radius); border: var(--lt-border-width, 1px) solid var(--lt-button-border-color, var(--_border-color)); box-sizing: border-box; color: var(--lt-button-color, var(--_color)); cursor: pointer; display: inline-flex; font-family: inherit; font-weight: 400; gap: var(--lt-spacing-2); justify-content: center; line-height: 1; min-width: var(--lt-button-min-width, 88px); user-select: none; transition: background-color 120ms ease, border-color 120ms ease, transform 50ms ease; } [part='base']:active { transform: translateY(1px); } [part='base']:focus-visible { outline: 3px solid var(--lt-border-focus); outline-offset: 2px; } [part='base'][disabled], [part='base'][aria-disabled='true'] { cursor: not-allowed; opacity: 0.6; pointer-events: none; transform: none; } /* anchor reset — browsers apply link color + underline by default */ a[part='base'] { text-decoration: none; } /* sizes */ :host([size='sm']) [part='base'] { font-size: 0.875rem; height: 32px; padding-inline: var(--lt-spacing-3); } :host([size='md']) [part='base'] { font-size: 1rem; height: 40px; padding-inline: var(--lt-spacing-4); } :host([size='lg']) [part='base'] { font-size: 1.0625rem; height: 48px; padding-inline: var(--lt-spacing-5); } /* variants — solid */ :host([variant='primary']) { --_bg: var(--lt-interactive-primary-bg); --_color: var(--lt-text-on-primary); --_hover-bg: var(--lt-interactive-primary-bg-hover); --_active-bg: var(--lt-interactive-primary-bg-active); } :host([variant='secondary']) { --_bg: var(--lt-interactive-secondary-bg); --_color: var(--lt-text-on-secondary); --_hover-bg: var(--lt-interactive-secondary-bg-hover); --_active-bg: var(--lt-interactive-secondary-bg-active); } :host([variant='neutral']) { --_bg: var(--lt-color-neutral-500); --_color: var(--lt-color-neutral-50); --_hover-bg: var(--lt-color-neutral-700); --_active-bg: var(--lt-color-neutral-800); } :host([variant='success']) { --_bg: var(--lt-interactive-success-bg); --_color: var(--lt-text-on-success); --_hover-bg: var(--lt-interactive-success-bg-hover); --_active-bg: var(--lt-interactive-success-bg-active); } :host([variant='warning']) { --_bg: var(--lt-interactive-warning-bg); --_color: var(--lt-text-on-warning); --_hover-bg: var(--lt-interactive-warning-bg-hover); --_active-bg: var(--lt-interactive-warning-bg-active); } :host([variant='error']) { --_bg: var(--lt-interactive-error-bg); --_color: var(--lt-text-on-error); --_hover-bg: var(--lt-interactive-error-bg-hover); --_active-bg: var(--lt-interactive-error-bg-active); } :host([variant='info']) { --_bg: var(--lt-interactive-info-bg); --_color: var(--lt-text-on-info); --_hover-bg: var(--lt-interactive-info-bg-hover); --_active-bg: var(--lt-interactive-info-bg-active); } [part='base']:hover:not([disabled]):not([aria-disabled='true']) { background: var(--lt-button-bg, var(--_hover-bg)); } [part='base']:active:not([disabled]):not([aria-disabled='true']) { background: var(--lt-button-bg, var(--_active-bg)); } /* outlined appearance */ :host([appearance='outlined'][variant='primary']) { --_bg: transparent; --_color: var(--lt-text-primary); --_border-color: var(--lt-border-primary-strong); --_hover-bg: var(--lt-bg-primary-subtle); --_active-bg: var(--lt-bg-primary-subtle); } :host([appearance='outlined'][variant='secondary']) { --_bg: transparent; --_color: var(--lt-text-secondary); --_border-color: var(--lt-border-secondary-strong); --_hover-bg: var(--lt-bg-secondary-subtle); --_active-bg: var(--lt-bg-secondary-subtle); } :host([appearance='outlined'][variant='neutral']) { --_bg: transparent; --_color: var(--lt-text-neutral); --_border-color: var(--lt-border-strong); --_hover-bg: var(--lt-bg-subtle); --_active-bg: var(--lt-bg-surface); } :host([appearance='outlined'][variant='success']) { --_bg: transparent; --_color: var(--lt-text-success); --_border-color: var(--lt-border-success-strong); --_hover-bg: var(--lt-bg-success-subtle); --_active-bg: var(--lt-bg-success-subtle); } :host([appearance='outlined'][variant='warning']) { --_bg: transparent; --_color: var(--lt-text-warning); --_border-color: var(--lt-border-warning-strong); --_hover-bg: var(--lt-bg-warning-subtle); --_active-bg: var(--lt-bg-warning-subtle); } :host([appearance='outlined'][variant='error']) { --_bg: transparent; --_color: var(--lt-text-error); --_border-color: var(--lt-border-error-strong); --_hover-bg: var(--lt-bg-error-subtle); --_active-bg: var(--lt-bg-error-subtle); } :host([appearance='outlined'][variant='info']) { --_bg: transparent; --_color: var(--lt-text-info); --_border-color: var(--lt-border-info-strong); --_hover-bg: var(--lt-bg-info-subtle); --_active-bg: var(--lt-bg-info-subtle); } /* ghost appearance — transparent background, no border, low-emphasis text button */ :host([appearance='ghost'][variant='primary']) { --_bg: transparent; --_color: var(--lt-text-primary); --_hover-bg: var(--lt-bg-primary-subtle); --_active-bg: var(--lt-bg-primary-subtle); } :host([appearance='ghost'][variant='secondary']) { --_bg: transparent; --_color: var(--lt-text-secondary); --_hover-bg: var(--lt-bg-secondary-subtle); --_active-bg: var(--lt-bg-secondary-subtle); } :host([appearance='ghost'][variant='neutral']) { --_bg: transparent; --_color: var(--lt-text-neutral); --_hover-bg: var(--lt-bg-subtle); --_active-bg: var(--lt-bg-surface); } :host([appearance='ghost'][variant='success']) { --_bg: transparent; --_color: var(--lt-text-success); --_hover-bg: var(--lt-bg-success-subtle); --_active-bg: var(--lt-bg-success-subtle); } :host([appearance='ghost'][variant='warning']) { --_bg: transparent; --_color: var(--lt-text-warning); --_hover-bg: var(--lt-bg-warning-subtle); --_active-bg: var(--lt-bg-warning-subtle); } :host([appearance='ghost'][variant='error']) { --_bg: transparent; --_color: var(--lt-text-error); --_hover-bg: var(--lt-bg-error-subtle); --_active-bg: var(--lt-bg-error-subtle); } :host([appearance='ghost'][variant='info']) { --_bg: transparent; --_color: var(--lt-text-info); --_hover-bg: var(--lt-bg-info-subtle); --_active-bg: var(--lt-bg-info-subtle); } :host([appearance='outlined']) [part='base']:active:not([disabled]):not([aria-disabled='true']), :host([appearance='ghost']) [part='base']:active:not([disabled]):not([aria-disabled='true']) { opacity: 0.8; } /* bordered — adds a border on top of whatever appearance is active; a no-op on outlined, which already sets the same border color. */ :host([bordered][variant='primary']) { --_border-color: var(--lt-border-primary-strong); } :host([bordered][variant='secondary']) { --_border-color: var(--lt-border-secondary-strong); } :host([bordered][variant='neutral']) { --_border-color: var(--lt-border-strong); } :host([bordered][variant='success']) { --_border-color: var(--lt-border-success-strong); } :host([bordered][variant='warning']) { --_border-color: var(--lt-border-warning-strong); } :host([bordered][variant='error']) { --_border-color: var(--lt-border-error-strong); } :host([bordered][variant='info']) { --_border-color: var(--lt-border-info-strong); } /* loading */ .spinner { animation: spin 700ms linear infinite; border-radius: 999px; border-right-color: transparent; border: 2px solid currentColor; height: 1em; width: 1em; } @keyframes spin { to { transform: rotate(360deg); } } .icon, .end { align-items: center; display: inline-flex; justify-content: center; } :host([uppercase]) [part='base'] { font-variant-caps: small-caps; letter-spacing: 0.05rem; text-transform: lowercase; } `"
|
|
929
929
|
}
|
|
930
930
|
],
|
|
931
931
|
"exports": [
|
|
@@ -1008,6 +1008,15 @@
|
|
|
1008
1008
|
"default": "'filled'",
|
|
1009
1009
|
"description": "Appearance style (filled, outlined, or ghost)."
|
|
1010
1010
|
},
|
|
1011
|
+
{
|
|
1012
|
+
"kind": "field",
|
|
1013
|
+
"name": "bordered",
|
|
1014
|
+
"type": {
|
|
1015
|
+
"text": "boolean"
|
|
1016
|
+
},
|
|
1017
|
+
"default": "false",
|
|
1018
|
+
"description": "Adds a variant-colored border on top of the current appearance. A no-op on\n`outlined` (which already has one); adds a border to `filled`/`ghost`."
|
|
1019
|
+
},
|
|
1011
1020
|
{
|
|
1012
1021
|
"kind": "field",
|
|
1013
1022
|
"name": "size",
|
|
@@ -1190,7 +1199,7 @@
|
|
|
1190
1199
|
{
|
|
1191
1200
|
"kind": "variable",
|
|
1192
1201
|
"name": "calendarStyles",
|
|
1193
|
-
"default": "css` :host { display: inline-block; font-family: var(--lt-typography-
|
|
1202
|
+
"default": "css` :host { display: inline-block; font-family: var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif); } .calendar { background: var(--lt-bg-default); border-radius: var(--lt-border-radius); border: var(--lt-border-width, 1px) solid var(--lt-border-default); display: flex; flex-direction: column; gap: var(--lt-spacing-2); padding: var(--lt-spacing-3); width: 17.25rem; } /* ── Header ── */ .header { align-items: center; display: flex; justify-content: space-between; } .month-label-btn { align-items: center; background: transparent; border-radius: var(--lt-border-radius); border: 1px solid transparent; color: var(--lt-text-default); cursor: pointer; display: inline-flex; font-family: inherit; font-size: 0.9375rem; font-weight: 600; gap: var(--lt-spacing-1); letter-spacing: 0.01em; padding: var(--lt-spacing-1) var(--lt-spacing-2); transition: background 120ms ease, border-color 120ms ease; } .month-label-btn:hover:not(:disabled) { background: var(--lt-bg-neutral-subtle); border-color: var(--lt-border-default); } .month-label-btn--open { background: var(--lt-bg-neutral-subtle); border-color: var(--lt-border-default); } .month-label-btn:disabled { cursor: not-allowed; opacity: 0.6; } .picker-chevron { color: var(--lt-text-subtle); transition: transform 150ms ease; } .month-label-btn--open .picker-chevron { transform: rotate(180deg); } .nav-btn { align-items: center; background: transparent; border-radius: var(--lt-border-radius); border: 1px solid transparent; color: var(--lt-text-subtle); cursor: pointer; display: inline-flex; height: 2rem; justify-content: center; padding: 0; transition: background 120ms ease, border-color 120ms ease, color 120ms ease; width: 2rem; } .nav-btn:hover:not(:disabled) { background: var(--lt-bg-neutral-subtle); border-color: var(--lt-border-default); color: var(--lt-text-default); } .nav-btn:disabled { color: var(--lt-text-disabled); cursor: not-allowed; } /* ── Weekday headers ── */ .weekdays { column-gap: 0; display: grid; grid-template-columns: repeat(7, 1fr); } .weekday { color: var(--lt-text-muted); font-size: 0.75rem; font-weight: 500; text-align: center; } /* ── Day grid ── */ .grid { column-gap: 0; display: grid; grid-template-columns: repeat(7, 1fr); row-gap: var(--lt-spacing-1); } [role='row'] { display: contents; } /* Day button — strip layer in range mode */ .day { align-items: center; background: transparent; border: none; color: var(--lt-text-default); cursor: pointer; display: inline-flex; font-family: inherit; font-size: 0.8125rem; font-weight: 400; height: 2.25rem; justify-content: center; outline: none; padding: 0; transition: background 100ms ease; width: 100%; } .day:disabled { cursor: not-allowed; } /* Day inner — the visible circle */ .day__inner { align-items: center; background: transparent; border: 2px solid transparent; border-radius: 50%; color: inherit; display: inline-flex; font-size: inherit; font-weight: inherit; height: 2.25rem; justify-content: center; transition: background 100ms ease, border-color 100ms ease, color 100ms ease; width: 2.25rem; } .day:hover:not(:disabled) .day__inner { background: var(--lt-bg-neutral-subtle); } .day:focus-visible .day__inner { outline: 2px solid var(--lt-border-focus); outline-offset: 1px; } /* Today ring */ .day--today .day__inner { border-color: var(--lt-border-primary); font-weight: 600; } /* Single-mode selected */ .day--selected .day__inner { background: var(--lt-interactive-primary-bg); border-color: transparent; color: var(--lt-text-on-primary); font-weight: 600; } .day--selected:hover:not(:disabled) .day__inner { background: var(--lt-interactive-primary-bg-hover); } /* Outside days */ .day--outside { color: var(--lt-text-muted); opacity: 0.5; } /* Empty filler cell */ .day--empty { background: transparent; border: none; cursor: default; pointer-events: none; } .day:disabled .day__inner { color: var(--lt-text-disabled); opacity: 0.4; } /* ── Range strips (on .day button = strip layer) ── */ /* Start: transparent on left, strip on right */ .day--range-left { background: linear-gradient(to right, transparent 50%, var(--lt-bg-primary-subtle) 50%); } /* End: strip on left, transparent on right */ .day--range-right { background: linear-gradient(to right, var(--lt-bg-primary-subtle) 50%, transparent 50%); } /* Same-day start+end — no strip needed */ .day--range-left.day--range-right { background: transparent; } /* Days between confirmed endpoints */ .day--in-range { background: var(--lt-bg-primary-subtle); } .day--in-range:hover:not(:disabled) .day__inner { background: var(--lt-bg-neutral-subtle); } /* Days between hover preview endpoints */ .day--in-hover-range { background: var(--lt-bg-primary-subtle); opacity: 0.45; } /* Confirmed range endpoint circle */ .day--range-confirmed .day__inner { background: var(--lt-interactive-primary-bg); border-color: transparent; color: var(--lt-text-on-primary); font-weight: 600; } .day--range-confirmed:hover:not(:disabled) .day__inner { background: var(--lt-interactive-primary-bg-hover); } /* Hover preview endpoint circle (semi-transparent) */ .day--range-hover .day__inner { background: var(--lt-interactive-primary-bg); border-color: transparent; color: var(--lt-text-on-primary); opacity: 0.5; } /* ── Multi-month layout ── */ .calendar--multi { width: auto; } .month-label-row { display: flex; flex: 1; justify-content: space-around; } .month-label { color: var(--lt-text-default); font-size: 0.9375rem; font-weight: 600; letter-spacing: 0.01em; text-align: center; } .month-panels { display: flex; gap: var(--lt-spacing-4); } .month-col { width: 17.25rem; } /* ── Month/year picker ── */ .picker-months { display: grid; gap: var(--lt-spacing-1); grid-template-columns: repeat(3, 1fr); } .picker-month-btn { background: transparent; border-radius: var(--lt-border-radius); border: 1px solid transparent; color: var(--lt-text-default); cursor: pointer; font-family: inherit; font-size: 0.8125rem; font-weight: 400; padding: var(--lt-spacing-2) 0; text-align: center; transition: background 100ms ease, border-color 100ms ease; } .picker-month-btn:hover:not(:disabled) { background: var(--lt-bg-neutral-subtle); border-color: var(--lt-border-default); } .picker-month-btn--current { background: var(--lt-interactive-primary-bg); border-color: transparent; color: var(--lt-text-on-primary); font-weight: 600; } .picker-month-btn--current:hover:not(:disabled) { background: var(--lt-interactive-primary-bg-hover); } .picker-month-btn:disabled { color: var(--lt-text-disabled); cursor: not-allowed; opacity: 0.5; } /* ── Footer ── */ .footer { border-top: 1px solid var(--lt-border-subtle); display: flex; justify-content: flex-end; padding-top: var(--lt-spacing-1); } .today-btn { background: transparent; border-radius: var(--lt-border-radius); border: var(--lt-border-width, 1px) solid var(--lt-border-default); color: var(--lt-text-subtle); cursor: pointer; font-family: inherit; font-size: 0.75rem; font-weight: 500; padding: var(--lt-spacing-1) var(--lt-spacing-2); transition: background 120ms ease, border-color 120ms ease, color 120ms ease; } .today-btn:hover:not(:disabled) { background: var(--lt-bg-neutral-subtle); border-color: var(--lt-border-strong); color: var(--lt-text-default); } .today-btn:disabled { color: var(--lt-text-disabled); cursor: not-allowed; opacity: 0.5; } `"
|
|
1194
1203
|
}
|
|
1195
1204
|
],
|
|
1196
1205
|
"exports": [
|
|
@@ -1724,7 +1733,7 @@
|
|
|
1724
1733
|
{
|
|
1725
1734
|
"kind": "variable",
|
|
1726
1735
|
"name": "checkboxStyles",
|
|
1727
|
-
"default": "css` :host { display: inline-block; font-family: var(--lt-typography-
|
|
1736
|
+
"default": "css` :host { display: inline-block; font-family: var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif); } .checkbox-wrapper { align-items: center; cursor: pointer; display: inline-flex; gap: var(--lt-spacing-2); } .box { display: inline-flex; flex-shrink: 0; position: relative; } :host([label-position='left']) .checkbox-wrapper { flex-direction: row-reverse; } :host([disabled]) .checkbox-wrapper { cursor: not-allowed; opacity: 0.6; } input[type='checkbox'] { appearance: none; border-radius: calc(var(--lt-border-radius) * 0.5); border: 2px solid var(--lt-border-strong); cursor: pointer; margin: 0; position: relative; transition: background-color 120ms ease, border-color 120ms ease; } input[type='checkbox']:hover:not(:disabled) { border-color: var(--lt-color-neutral-600); } input[type='checkbox']:focus-visible { outline: 3px solid var(--lt-border-focus); outline-offset: 2px; } input[type='checkbox']:disabled { cursor: not-allowed; } .checkmark { align-items: center; color: white; display: none; inset: 0; justify-content: center; pointer-events: none; position: absolute; } input[type='checkbox']:checked ~ .checkmark, input[type='checkbox']:indeterminate ~ .checkmark { display: flex; } .label { color: var(--lt-text-default); user-select: none; } /* Size variants */ :host([size='sm']) input[type='checkbox'] { height: 16px; width: 16px; } :host([size='sm']) .label { font-size: 0.875rem; } :host([size='md']) input[type='checkbox'] { height: 20px; width: 20px; } :host([size='md']) .label { font-size: 1rem; } :host([size='lg']) input[type='checkbox'] { height: 24px; width: 24px; } :host([size='lg']) .label { font-size: 1.0625rem; } /* Variant styles */ :host([variant='primary']) input[type='checkbox']:checked, :host([variant='primary']) input[type='checkbox']:indeterminate { background: var(--lt-interactive-primary-bg); border-color: var(--lt-interactive-primary-bg); } :host([variant='primary']) input[type='checkbox']:checked:hover:not(:disabled), :host([variant='primary']) input[type='checkbox']:indeterminate:hover:not(:disabled) { background: var(--lt-interactive-primary-bg-hover); border-color: var(--lt-interactive-primary-bg-hover); } :host([variant='secondary']) input[type='checkbox']:checked, :host([variant='secondary']) input[type='checkbox']:indeterminate { background: var(--lt-interactive-secondary-bg); border-color: var(--lt-interactive-secondary-bg); } :host([variant='secondary']) input[type='checkbox']:checked:hover:not(:disabled), :host([variant='secondary']) input[type='checkbox']:indeterminate:hover:not(:disabled) { background: var(--lt-interactive-secondary-bg-hover); border-color: var(--lt-interactive-secondary-bg-hover); } :host([variant='success']) input[type='checkbox']:checked, :host([variant='success']) input[type='checkbox']:indeterminate { background: var(--lt-interactive-success-bg); border-color: var(--lt-interactive-success-bg); } :host([variant='success']) input[type='checkbox']:checked:hover:not(:disabled), :host([variant='success']) input[type='checkbox']:indeterminate:hover:not(:disabled) { background: var(--lt-interactive-success-bg-hover); border-color: var(--lt-interactive-success-bg-hover); } :host([variant='error']) input[type='checkbox']:checked, :host([variant='error']) input[type='checkbox']:indeterminate { background: var(--lt-interactive-error-bg); border-color: var(--lt-interactive-error-bg); } :host([variant='error']) input[type='checkbox']:checked:hover:not(:disabled), :host([variant='error']) input[type='checkbox']:indeterminate:hover:not(:disabled) { background: var(--lt-interactive-error-bg-hover); border-color: var(--lt-interactive-error-bg-hover); } :host([variant='info']) input[type='checkbox']:checked, :host([variant='info']) input[type='checkbox']:indeterminate { background: var(--lt-interactive-info-bg); border-color: var(--lt-interactive-info-bg); } :host([variant='info']) input[type='checkbox']:checked:hover:not(:disabled), :host([variant='info']) input[type='checkbox']:indeterminate:hover:not(:disabled) { background: var(--lt-interactive-info-bg-hover); border-color: var(--lt-interactive-info-bg-hover); } `"
|
|
1728
1737
|
}
|
|
1729
1738
|
],
|
|
1730
1739
|
"exports": [
|
|
@@ -1993,7 +2002,7 @@
|
|
|
1993
2002
|
{
|
|
1994
2003
|
"kind": "variable",
|
|
1995
2004
|
"name": "chipStyles",
|
|
1996
|
-
"default": "css` :host { display: inline-flex; font-family: var(--lt-typography-
|
|
2005
|
+
"default": "css` :host { display: inline-flex; font-family: var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif); vertical-align: middle; } span[part='base'] { align-items: center; background: var(--lt-chip-bg); border-radius: 999px; /* Chips are small pills (as short as 20px tall at size=\"sm\") — a \"thick\" (4px) themed border eats too much of that height and reads as compressed/squished, so cap what the chip actually renders at \"medium\" (2px) regardless of the theme's configured border width. */ border: min(var(--lt-border-width, 1px), 2px) solid var(--lt-chip-border-color, transparent); color: var(--lt-chip-color); box-sizing: border-box; display: inline-flex; font-weight: 400; line-height: 1; transition: background-color 120ms ease, border-color 120ms ease; user-select: none; white-space: nowrap; } ::slotted([slot='icon']) { flex-shrink: 0; } .delete { align-items: center; background: none; border-radius: 999px; border: none; color: inherit; cursor: pointer; display: inline-flex; flex-shrink: 0; justify-content: center; opacity: 0.6; padding: 0; transition: opacity 120ms ease, background-color 120ms ease; } .delete:hover:not(:disabled) { opacity: 1; } .delete:disabled { cursor: not-allowed; } :host([disabled]) span[part='base'] { cursor: not-allowed; opacity: 0.5; pointer-events: none; } /* ── Sizes ────────────────────────────────────────────────────────────── */ :host([size='sm']) span[part='base'] { font-size: 0.75rem; gap: var(--lt-spacing-1); height: 20px; padding-inline: var(--lt-spacing-2); } :host([size='md']) span[part='base'] { font-size: 0.8125rem; gap: var(--lt-spacing-1); height: 26px; padding-inline: var(--lt-spacing-3); } :host([size='lg']) span[part='base'] { font-size: 0.9375rem; gap: var(--lt-spacing-2); height: 32px; padding-inline: var(--lt-spacing-4); } /* ── Filled (tinted bg, colored border, dark text) ───────────────────── */ :host([appearance='filled'][variant='primary']) span[part='base'] { background: var(--lt-bg-primary-subtle); border-color: var(--lt-border-primary); color: var(--lt-text-primary); } :host([appearance='filled'][variant='secondary']) span[part='base'] { background: var(--lt-bg-secondary-subtle); border-color: var(--lt-border-secondary); color: var(--lt-text-secondary); } :host([appearance='filled'][variant='neutral']) span[part='base'] { background: var(--lt-bg-surface); border-color: var(--lt-border-default); color: var(--lt-text-neutral); } :host([appearance='filled'][variant='success']) span[part='base'] { background: var(--lt-bg-success-subtle); border-color: var(--lt-border-success); color: var(--lt-text-success); } :host([appearance='filled'][variant='warning']) span[part='base'] { background: var(--lt-bg-warning-subtle); border-color: var(--lt-border-warning); color: var(--lt-text-warning); } :host([appearance='filled'][variant='error']) span[part='base'] { background: var(--lt-bg-error-subtle); border-color: var(--lt-border-error); color: var(--lt-text-error); } :host([appearance='filled'][variant='info']) span[part='base'] { background: var(--lt-bg-info-subtle); border-color: var(--lt-border-info); color: var(--lt-text-info); } /* ── Outlined (transparent bg, colored border and text) ──────────────── */ :host([appearance='outlined'][variant='primary']) span[part='base'] { background: transparent; border-color: var(--lt-border-primary-strong); color: var(--lt-text-primary); } :host([appearance='outlined'][variant='secondary']) span[part='base'] { background: transparent; border-color: var(--lt-border-secondary-strong); color: var(--lt-text-secondary); } :host([appearance='outlined'][variant='neutral']) span[part='base'] { background: transparent; border-color: var(--lt-border-strong); color: var(--lt-text-neutral); } :host([appearance='outlined'][variant='success']) span[part='base'] { background: transparent; border-color: var(--lt-border-success-strong); color: var(--lt-text-success); } :host([appearance='outlined'][variant='warning']) span[part='base'] { background: transparent; border-color: var(--lt-border-warning-strong); color: var(--lt-text-warning); } :host([appearance='outlined'][variant='error']) span[part='base'] { background: transparent; border-color: var(--lt-border-error-strong); color: var(--lt-text-error); } :host([appearance='outlined'][variant='info']) span[part='base'] { background: transparent; border-color: var(--lt-border-info-strong); color: var(--lt-text-info); } `"
|
|
1997
2006
|
}
|
|
1998
2007
|
],
|
|
1999
2008
|
"exports": [
|
|
@@ -2173,7 +2182,7 @@
|
|
|
2173
2182
|
{
|
|
2174
2183
|
"kind": "variable",
|
|
2175
2184
|
"name": "colorInputStyles",
|
|
2176
|
-
"default": "css` :host { display: inline-block; font-family: var(--lt-typography-
|
|
2185
|
+
"default": "css` :host { display: inline-block; font-family: var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif); width: 100%; } .wrapper { display: flex; flex-direction: column; gap: var(--lt-spacing-1); width: 100%; cursor: pointer; } :host([disabled]) .wrapper { cursor: not-allowed; } .label { color: var(--lt-text-subtle); } .input-container { position: relative; display: flex; align-items: center; background: var(--lt-bg-subtle); border: var(--lt-border-width, 1px) solid var(--lt-border-default); border-radius: var(--lt-border-radius); box-sizing: border-box; transition: border-color 120ms ease, box-shadow 120ms ease; width: 100%; overflow: hidden; } .input-container:hover:not(:has(.native-picker:disabled)) { border-color: var(--lt-border-strong); } .input-container:focus-within { border-color: var(--lt-interactive-primary-bg); box-shadow: 0 0 0 3px var(--lt-bg-primary-subtle); outline: none; } :host([disabled]) .input-container { background: var(--lt-bg-surface); } .color-swatch { flex-shrink: 0; border-radius: 50%; border: 1.5px solid rgb(0 0 0 / 0.15); box-sizing: border-box; } .color-swatch.empty { border-style: dashed; border-color: var(--lt-border-default); background: repeating-conic-gradient(var(--lt-bg-muted) 0% 25%, transparent 0% 50%) 0 0 / 8px 8px; } .display-value { flex: 1; color: var(--lt-text-default); font-family: inherit; font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .display-value.is-placeholder { color: var(--lt-text-muted); } :host([disabled]) .display-value { color: var(--lt-text-muted); } .icon-end { flex-shrink: 0; color: var(--lt-text-muted); pointer-events: none; } /* The native picker is invisible but covers the entire container to handle all click/keyboard events */ .native-picker { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; border: none; padding: 0; } .native-picker:disabled { cursor: not-allowed; } /* ── sizes ───────────────────────────────────────────────────────────────── */ :host([size='sm']) .input-container { height: 32px; padding-inline: var(--lt-spacing-3); gap: var(--lt-spacing-2); font-size: 0.875rem; } :host([size='sm']) .color-swatch { width: 14px; height: 14px; } :host([size='md']) .input-container { height: 40px; padding-inline: var(--lt-spacing-4); gap: var(--lt-spacing-2); font-size: 1rem; } :host([size='md']) .color-swatch { width: 16px; height: 16px; } :host([size='lg']) .input-container { height: 48px; padding-inline: var(--lt-spacing-5); gap: var(--lt-spacing-3); font-size: 1.0625rem; } :host([size='lg']) .color-swatch { width: 20px; height: 20px; } :host([size='lg']) .icon-end { width: 24px; height: 24px; } `"
|
|
2177
2186
|
}
|
|
2178
2187
|
],
|
|
2179
2188
|
"exports": [
|
|
@@ -2378,7 +2387,7 @@
|
|
|
2378
2387
|
"type": {
|
|
2379
2388
|
"text": "array"
|
|
2380
2389
|
},
|
|
2381
|
-
"default": "[ floatingPanelReset, css` :host { display: block; font-family: var(--lt-typography-
|
|
2390
|
+
"default": "[ floatingPanelReset, css` :host { display: block; font-family: var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif); position: relative; } .wrapper { display: flex; flex-direction: column; gap: var(--lt-spacing-1); } label { color: var(--lt-text-default); } .required-indicator { color: var(--lt-color-error-500); margin-left: 2px; } .input-wrap { align-items: center; background: var(--lt-bg-surface); border-radius: var(--lt-border-radius); border: var(--lt-border-width, 1px) solid var(--lt-border-default); cursor: text; display: flex; gap: var(--lt-spacing-2); overflow: hidden; position: relative; transition: border-color 150ms ease, box-shadow 150ms ease; } :host([open]) .input-wrap, .input-wrap:focus-within { border-color: var(--lt-border-primary); box-shadow: 0 0 0 3px var(--lt-bg-primary-subtle); } :host([variant='error']) .input-wrap { border-color: var(--lt-color-error-500); } :host([variant='error'][open]) .input-wrap, :host([variant='error']) .input-wrap:focus-within { box-shadow: 0 0 0 3px var(--lt-bg-error-subtle); } :host([variant='success']) .input-wrap { border-color: var(--lt-color-success-500); } :host([variant='warning']) .input-wrap { border-color: var(--lt-color-warning-500); } :host([disabled]) .input-wrap { background: var(--lt-bg-neutral-subtle); cursor: not-allowed; pointer-events: none; } input { background: transparent; border: none; color: var(--lt-text-default); flex: 1; font-family: inherit; min-width: 0; outline: none; } input::placeholder { color: var(--lt-text-placeholder, var(--lt-color-neutral-400)); } :host([disabled]) input { color: var(--lt-text-subtle); cursor: not-allowed; } /* Sizes */ :host([size='sm']) .input-wrap { height: 32px; padding: 0 var(--lt-spacing-2); } :host([size='sm']) input { font-size: 0.8125rem; } :host([size='md']) .input-wrap, :host(:not([size])) .input-wrap { height: 40px; padding: 0 var(--lt-spacing-3); } :host([size='md']) input, :host(:not([size])) input { font-size: 0.9375rem; } :host([size='lg']) .input-wrap { height: 48px; padding: 0 var(--lt-spacing-4); } :host([size='lg']) input { font-size: 1rem; } .chevron { color: var(--lt-text-subtle); flex-shrink: 0; pointer-events: none; transition: transform 150ms ease; } :host([open]) .chevron { transform: rotate(180deg); } .dropdown { background: var(--lt-bg-surface); border-radius: var(--lt-border-radius); border: var(--lt-border-width, 1px) solid var(--lt-border-default); box-shadow: var(--lt-shadow-md); max-height: 240px; overflow-y: auto; z-index: 100; } .option { align-items: center; background: transparent; border: none; color: var(--lt-text-default); cursor: pointer; display: flex; font-family: inherit; font-size: 0.9375rem; padding: var(--lt-spacing-2) var(--lt-spacing-3); text-align: left; width: 100%; } .option:hover { background: var(--lt-bg-neutral-subtle); } .option[aria-selected='true'] { background: var(--lt-bg-primary-subtle); color: var(--lt-color-primary-700); font-weight: 500; } .option[disabled] { color: var(--lt-text-subtle); cursor: not-allowed; pointer-events: none; } .no-results { color: var(--lt-text-subtle); font-size: 0.875rem; padding: var(--lt-spacing-3); text-align: center; } .helper-text { color: var(--lt-text-subtle); font-size: 0.8125rem; } :host([variant='error']) .helper-text { color: var(--lt-color-error-600); } :host([variant='success']) .helper-text { color: var(--lt-color-success-600); } :host([variant='warning']) .helper-text { color: var(--lt-color-warning-700); } ` ]"
|
|
2382
2391
|
}
|
|
2383
2392
|
],
|
|
2384
2393
|
"exports": [
|
|
@@ -2729,7 +2738,7 @@
|
|
|
2729
2738
|
"type": {
|
|
2730
2739
|
"text": "array"
|
|
2731
2740
|
},
|
|
2732
|
-
"default": "[ floatingPanelReset, css` :host { display: block; font-family: var(--lt-typography-
|
|
2741
|
+
"default": "[ floatingPanelReset, css` :host { display: block; font-family: var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif); } .wrapper { display: flex; flex-direction: column; gap: var(--lt-spacing-1); } label { color: var(--lt-text-default); cursor: default; } .required-indicator { color: var(--lt-color-error-500); margin-left: 2px; } /* ── Field ── */ .field { position: relative; } .field-btn { align-items: center; background: var(--lt-bg-surface); border-radius: var(--lt-border-radius); border: var(--lt-border-width, 1px) solid var(--lt-border-default); color: var(--lt-text-default); cursor: pointer; display: flex; font-family: inherit; justify-content: space-between; outline: none; text-align: left; transition: border-color 150ms ease, box-shadow 150ms ease; width: 100%; } .field-btn:focus-visible { border-color: var(--lt-border-primary); box-shadow: 0 0 0 3px var(--lt-bg-primary-subtle); } .field-btn:disabled { background: var(--lt-bg-neutral-subtle); color: var(--lt-text-subtle); cursor: not-allowed; } .display-value { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .display-value--placeholder { color: var(--lt-text-muted); } .calendar-icon { color: var(--lt-text-subtle); flex-shrink: 0; line-height: 0; margin-left: var(--lt-spacing-2); } /* ── Sizes ── */ :host([size='sm']) .field-btn { font-size: 0.8125rem; height: 32px; padding: 0 var(--lt-spacing-2); } :host([size='md']) .field-btn, :host(:not([size])) .field-btn { font-size: 0.9375rem; height: 40px; padding: 0 var(--lt-spacing-3); } :host([size='lg']) .field-btn { font-size: 1rem; height: 48px; padding: 0 var(--lt-spacing-4); } /* ── Variants ── */ :host([variant='success']) .field-btn { border-color: var(--lt-color-success-500); } :host([variant='success']) .field-btn:focus-visible { box-shadow: 0 0 0 3px var(--lt-bg-success-subtle); } :host([variant='warning']) .field-btn { border-color: var(--lt-color-warning-500); } :host([variant='warning']) .field-btn:focus-visible { box-shadow: 0 0 0 3px var(--lt-bg-warning-subtle); } :host([variant='error']) .field-btn { border-color: var(--lt-color-error-500); } :host([variant='error']) .field-btn:focus-visible { box-shadow: 0 0 0 3px var(--lt-bg-error-subtle); } /* ── Dropdown ── */ .dropdown { display: none; filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.08)); z-index: 9999; } /* ── Helper text ── */ .helper-text { color: var(--lt-text-subtle); font-size: 0.8125rem; } :host([variant='error']) .helper-text { color: var(--lt-color-error-600); } :host([variant='success']) .helper-text { color: var(--lt-color-success-600); } :host([variant='warning']) .helper-text { color: var(--lt-color-warning-700); } ` ]"
|
|
2733
2742
|
}
|
|
2734
2743
|
],
|
|
2735
2744
|
"exports": [
|
|
@@ -3077,7 +3086,7 @@
|
|
|
3077
3086
|
{
|
|
3078
3087
|
"kind": "variable",
|
|
3079
3088
|
"name": "datepickerStyles",
|
|
3080
|
-
"default": "css` :host { display: block; font-family: var(--lt-typography-
|
|
3089
|
+
"default": "css` :host { display: block; font-family: var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif); } .wrapper { display: flex; flex-direction: column; gap: var(--lt-spacing-1); } label { color: var(--lt-text-default); display: flex; flex-direction: column; gap: var(--lt-spacing-1); } .required-indicator { color: var(--lt-color-error-500); } input { background: var(--lt-bg-surface); border-radius: var(--lt-border-radius); border: var(--lt-border-width, 1px) solid var(--lt-border-default); color: var(--lt-text-default); font-family: inherit; font-size: 0.9375rem; outline: none; transition: border-color 150ms ease, box-shadow 150ms ease; width: 100%; box-sizing: border-box; } input:focus { border-color: var(--lt-border-primary); box-shadow: 0 0 0 3px var(--lt-bg-primary-subtle); } input:disabled { background: var(--lt-bg-neutral-subtle); color: var(--lt-text-subtle); cursor: not-allowed; } /* Sizes */ :host([size='sm']) input { font-size: 0.8125rem; height: 32px; padding: 0 var(--lt-spacing-2); } :host([size='md']) input, :host(:not([size])) input { font-size: 0.9375rem; height: 40px; padding: 0 var(--lt-spacing-3); } :host([size='lg']) input { font-size: 1rem; height: 48px; padding: 0 var(--lt-spacing-4); } /* Variants */ :host([variant='success']) input { border-color: var(--lt-color-success-500); } :host([variant='success']) input:focus { box-shadow: 0 0 0 3px var(--lt-bg-success-subtle); } :host([variant='warning']) input { border-color: var(--lt-color-warning-500); } :host([variant='warning']) input:focus { box-shadow: 0 0 0 3px var(--lt-bg-warning-subtle); } :host([variant='error']) input { border-color: var(--lt-color-error-500); } :host([variant='error']) input:focus { box-shadow: 0 0 0 3px var(--lt-bg-error-subtle); } .helper-text { color: var(--lt-text-subtle); font-size: 0.8125rem; } :host([variant='error']) .helper-text { color: var(--lt-color-error-600); } :host([variant='success']) .helper-text { color: var(--lt-color-success-600); } :host([variant='warning']) .helper-text { color: var(--lt-color-warning-700); } `"
|
|
3081
3090
|
}
|
|
3082
3091
|
],
|
|
3083
3092
|
"exports": [
|
|
@@ -3360,7 +3369,7 @@
|
|
|
3360
3369
|
{
|
|
3361
3370
|
"kind": "variable",
|
|
3362
3371
|
"name": "dialogStyles",
|
|
3363
|
-
"default": "css` :host { font-family: var(--lt-typography-
|
|
3372
|
+
"default": "css` :host { font-family: var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif); } /* Backdrop */ .backdrop { align-items: center; background: rgba(0, 0, 0, var(--lt-dialog-overlay-opacity, 0.5)); display: flex; height: 100vh; justify-content: center; left: 0; opacity: 0; padding: var(--lt-spacing-4); position: fixed; top: 0; transition: opacity 200ms ease; width: 100vw; z-index: 1000; } :host([open]) .backdrop { opacity: 1; } :host(:not([open])) .backdrop { pointer-events: none; } /* lt-surface host — flex item inside .backdrop, sized per size variant */ lt-surface { width: 100%; } :host([size='sm']) lt-surface { max-width: 400px; } :host([size='md']) lt-surface { max-width: 600px; } :host([size='lg']) lt-surface { max-width: 800px; } :host([size='xl']) lt-surface { max-width: 1000px; } :host([size='fullscreen']) .backdrop { padding: 0; } :host([size='fullscreen']) lt-surface { height: 100vh; max-height: 100vh; max-width: 100vw; } /* lt-surface inner div — layout and animation */ lt-surface::part(surface) { display: flex; flex-direction: column; max-height: calc(100vh - var(--lt-spacing-8)); opacity: 0; position: relative; transform: translateY(16px); transition: opacity 220ms ease, transform 220ms cubic-bezier(0.34, 1.2, 0.64, 1); } :host([open]) lt-surface::part(surface) { opacity: 1; transform: translateY(0); } :host([size='fullscreen']) lt-surface::part(surface) { border-radius: 0; max-height: 100vh; } /* Header */ .header { align-items: center; border-bottom: 1px solid var(--lt-border-default); display: flex; gap: var(--lt-spacing-4); padding: var(--lt-spacing-5); position: relative; } .header-content { flex: 1; } .title { color: var(--lt-text-default); } .close-button { flex-shrink: 0; } /* Body */ .body { color: var(--lt-color-neutral-700); flex: 1; overflow-y: auto; padding: var(--lt-spacing-5); } /* Footer */ .footer { border-top: 1px solid var(--lt-border-default); display: flex; gap: var(--lt-spacing-3); justify-content: flex-end; padding: var(--lt-spacing-5); } :host([uppercase]) .title::part(base) { font-variant-caps: small-caps; letter-spacing: 0.05rem; text-transform: lowercase; } `"
|
|
3364
3373
|
}
|
|
3365
3374
|
],
|
|
3366
3375
|
"exports": [
|
|
@@ -3478,6 +3487,24 @@
|
|
|
3478
3487
|
"default": "false",
|
|
3479
3488
|
"description": "Apply a frosted-glass blur effect to the backdrop."
|
|
3480
3489
|
},
|
|
3490
|
+
{
|
|
3491
|
+
"kind": "field",
|
|
3492
|
+
"name": "elevation",
|
|
3493
|
+
"type": {
|
|
3494
|
+
"text": "SurfaceElevation"
|
|
3495
|
+
},
|
|
3496
|
+
"default": "'4'",
|
|
3497
|
+
"description": "Elevation level of the internal surface, matching `lt-surface`'s scale."
|
|
3498
|
+
},
|
|
3499
|
+
{
|
|
3500
|
+
"kind": "field",
|
|
3501
|
+
"name": "appearance",
|
|
3502
|
+
"type": {
|
|
3503
|
+
"text": "SurfaceAppearance"
|
|
3504
|
+
},
|
|
3505
|
+
"default": "'filled'",
|
|
3506
|
+
"description": "Visual appearance of the internal surface, matching `lt-surface`'s vocabulary."
|
|
3507
|
+
},
|
|
3481
3508
|
{
|
|
3482
3509
|
"kind": "field",
|
|
3483
3510
|
"name": "dialogElement",
|
|
@@ -3661,7 +3688,7 @@
|
|
|
3661
3688
|
{
|
|
3662
3689
|
"kind": "variable",
|
|
3663
3690
|
"name": "dividerStyles",
|
|
3664
|
-
"default": "css` :host { display: block; } :host([orientation='vertical']) { align-self: stretch; display: inline-flex; width: auto; } /* ── Horizontal ─────────────────────────────────────────────────────────── */ :host([orientation='horizontal']) [part='base'], :host(:not([orientation])) [part='base'] { align-items: center; display: flex; width: 100%; } :host([orientation='horizontal']) [part='base']::before, :host(:not([orientation])) [part='base']::before, :host([orientation='horizontal']) [part='base']::after, :host(:not([orientation])) [part='base']::after { border-top: 1px solid var(--lt-border-default); border-top-style: var(--_divider-style, solid); content: ''; flex: 1; } /* ── Vertical ───────────────────────────────────────────────────────────── */ :host([orientation='vertical']) [part='base'] { align-items: center; display: flex; flex-direction: column; height: 100%; } :host([orientation='vertical']) [part='base']::before, :host([orientation='vertical']) [part='base']::after { border-left: 1px solid var(--lt-border-default); border-left-style: var(--_divider-style, solid); content: ''; flex: 1; } /* ── Label ──────────────────────────────────────────────────────────────── */ [part='label'] { color: var(--lt-text-subtle); font-family: var(--lt-typography-
|
|
3691
|
+
"default": "css` :host { display: block; } :host([orientation='vertical']) { align-self: stretch; display: inline-flex; width: auto; } /* ── Horizontal ─────────────────────────────────────────────────────────── */ :host([orientation='horizontal']) [part='base'], :host(:not([orientation])) [part='base'] { align-items: center; display: flex; width: 100%; } :host([orientation='horizontal']) [part='base']::before, :host(:not([orientation])) [part='base']::before, :host([orientation='horizontal']) [part='base']::after, :host(:not([orientation])) [part='base']::after { border-top: 1px solid var(--lt-border-default); border-top-style: var(--_divider-style, solid); content: ''; flex: 1; } /* ── Vertical ───────────────────────────────────────────────────────────── */ :host([orientation='vertical']) [part='base'] { align-items: center; display: flex; flex-direction: column; height: 100%; } :host([orientation='vertical']) [part='base']::before, :host([orientation='vertical']) [part='base']::after { border-left: 1px solid var(--lt-border-default); border-left-style: var(--_divider-style, solid); content: ''; flex: 1; } /* ── Label ──────────────────────────────────────────────────────────────── */ [part='label'] { color: var(--lt-text-subtle); font-family: var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif); font-size: 0.75rem; font-weight: 600; padding-inline: var(--lt-spacing-3); white-space: nowrap; } :host([orientation='vertical']) [part='label'] { padding-block: var(--lt-spacing-3); padding-inline: 0; } /* ── Appearances ────────────────────────────────────────────────────────── */ :host([appearance='solid']) { --_divider-style: solid; } :host([appearance='dashed']) { --_divider-style: dashed; } :host([appearance='dotted']) { --_divider-style: dotted; } `"
|
|
3665
3692
|
}
|
|
3666
3693
|
],
|
|
3667
3694
|
"exports": [
|
|
@@ -3779,7 +3806,7 @@
|
|
|
3779
3806
|
{
|
|
3780
3807
|
"kind": "variable",
|
|
3781
3808
|
"name": "dropdownItemStyles",
|
|
3782
|
-
"default": "css` :host { display: block; } .item { align-items: center; background: none; border: none; border-radius: 0; color: var(--lt-text-default); cursor: pointer; display: flex; font-family: var(--lt-typography-
|
|
3809
|
+
"default": "css` :host { display: block; } .item { align-items: center; background: none; border: none; border-radius: 0; color: var(--lt-text-default); cursor: pointer; display: flex; font-family: var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif); font-size: 0.875rem; gap: var(--lt-spacing-2); padding: var(--lt-spacing-2) var(--lt-spacing-4); text-align: left; text-decoration: none; width: 100%; } .item:hover, .item:focus-visible { background: var(--lt-bg-neutral-subtle); outline: none; } .item:active { background: var(--lt-bg-overlay); } :host([selected]) .item { background: var(--lt-bg-primary-subtle); color: var(--lt-text-primary); font-weight: 600; } :host([disabled]) { pointer-events: none; } :host([disabled]) .item { color: var(--lt-text-disabled); cursor: not-allowed; } `"
|
|
3783
3810
|
}
|
|
3784
3811
|
],
|
|
3785
3812
|
"exports": [
|
|
@@ -3895,7 +3922,7 @@
|
|
|
3895
3922
|
"type": {
|
|
3896
3923
|
"text": "array"
|
|
3897
3924
|
},
|
|
3898
|
-
"default": "[ floatingPanelReset, css` :host { display: inline-block; font-family: var(--lt-typography-
|
|
3925
|
+
"default": "[ floatingPanelReset, css` :host { display: inline-block; font-family: var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif); } .trigger-wrap { display: contents; } lt-surface.menu { display: none; min-width: 10rem; z-index: 1000; } lt-surface.menu::part(surface) { overflow: hidden; padding-block: var(--lt-dropdown-menu-padding, var(--lt-spacing-2)); } ` ]"
|
|
3899
3926
|
}
|
|
3900
3927
|
],
|
|
3901
3928
|
"exports": [
|
|
@@ -3917,6 +3944,12 @@
|
|
|
3917
3944
|
"kind": "class",
|
|
3918
3945
|
"description": "A floating menu anchored to a trigger element.",
|
|
3919
3946
|
"name": "Dropdown",
|
|
3947
|
+
"cssProperties": [
|
|
3948
|
+
{
|
|
3949
|
+
"description": "Overrides the menu surface's default vertical padding.",
|
|
3950
|
+
"name": "--lt-dropdown-menu-padding"
|
|
3951
|
+
}
|
|
3952
|
+
],
|
|
3920
3953
|
"slots": [
|
|
3921
3954
|
{
|
|
3922
3955
|
"description": "The element that opens/closes the menu (e.g. lt-button)",
|
|
@@ -4205,7 +4238,7 @@
|
|
|
4205
4238
|
{
|
|
4206
4239
|
"kind": "variable",
|
|
4207
4240
|
"name": "iconButtonStyles",
|
|
4208
|
-
"default": "css` :host { display: inline-flex; /* Internal state props — set per variant/appearance below */ --_color: var(--lt-text-subtle); --_bg: transparent; --_border-color: transparent; --_hover-bg: var(--lt-bg-subtle); --_hover-color: var(--lt-text-default); --_active-bg: var(--lt-bg-subtle); } [part='base'] { align-items: center; background: var(--lt-icon-button-bg, var(--_bg)); border-radius: var(--lt-border-radius); border: var(--lt-border-width, 1px) solid var(--lt-icon-button-border-color, var(--_border-color)); box-sizing: border-box; color: var(--lt-icon-button-color, var(--_color)); cursor: pointer; display: inline-flex; justify-content: center; padding: 0; transition: background-color 120ms ease, border-color 120ms ease, transform 50ms ease; user-select: none; } [part='base']:hover:not([disabled]) { background: var(--lt-icon-button-hover-bg, var(--_hover-bg)); color: var(--lt-icon-button-hover-color, var(--lt-icon-button-color, var(--_hover-color))); } [part='base']:active { transform: translateY(1px); } [part='base']:active:not([disabled]) { background: var(--lt-icon-button-hover-bg, var(--_active-bg)); } [part='base']:focus-visible { outline: 3px solid var(--lt-border-focus); outline-offset: 2px; } [part='base'][disabled] { cursor: not-allowed; opacity: 0.5; pointer-events: none; transform: none; } a[part='base'] { text-decoration: none; color: inherit; } /* sizes */ :host([size='sm']) [part='base'] { height: 28px; width: 28px; } :host([size='md']) [part='base'] { height: 36px; width: 36px; } :host([size='lg']) [part='base'] { height: 44px; width: 44px; } /* ── ghost ────────────────────────────────────────────────── */ :host([appearance='ghost'][variant='primary']) { --_color: var(--lt-text-primary); --_hover-bg: var(--lt-bg-primary-subtle); --_hover-color: var(--lt-text-primary); --_active-bg: var(--lt-bg-primary-subtle); } :host([appearance='ghost'][variant='secondary']) { --_color: var(--lt-text-secondary); --_hover-bg: var(--lt-bg-secondary-subtle); --_hover-color: var(--lt-text-secondary); --_active-bg: var(--lt-bg-secondary-subtle); } :host([appearance='ghost'][variant='success']) { --_color: var(--lt-text-success); --_hover-bg: var(--lt-bg-success-subtle); --_hover-color: var(--lt-text-success); --_active-bg: var(--lt-bg-success-subtle); } :host([appearance='ghost'][variant='warning']) { --_color: var(--lt-text-warning); --_hover-bg: var(--lt-bg-warning-subtle); --_hover-color: var(--lt-text-warning); --_active-bg: var(--lt-bg-warning-subtle); } :host([appearance='ghost'][variant='error']) { --_color: var(--lt-text-error); --_hover-bg: var(--lt-bg-error-subtle); --_hover-color: var(--lt-text-error); --_active-bg: var(--lt-bg-error-subtle); } :host([appearance='ghost'][variant='info']) { --_color: var(--lt-text-info); --_hover-bg: var(--lt-bg-info-subtle); --_hover-color: var(--lt-text-info); --_active-bg: var(--lt-bg-info-subtle); } /* ── filled ───────────────────────────────────────────────── */ :host([appearance='filled'][variant='primary']) { --_bg: var(--lt-interactive-primary-bg); --_color: var(--lt-text-on-primary); --_hover-bg: var(--lt-interactive-primary-bg-hover); --_hover-color: var(--lt-text-on-primary); --_active-bg: var(--lt-interactive-primary-bg-active); } :host([appearance='filled'][variant='secondary']) { --_bg: var(--lt-interactive-secondary-bg); --_color: var(--lt-text-on-secondary); --_hover-bg: var(--lt-interactive-secondary-bg-hover); --_hover-color: var(--lt-text-on-secondary); --_active-bg: var(--lt-interactive-secondary-bg-active); } :host([appearance='filled'][variant='neutral']) { --_bg: var(--lt-color-neutral-500); --_color: var(--lt-color-neutral-50); --_hover-bg: var(--lt-color-neutral-700); --_hover-color: var(--lt-color-neutral-50); --_active-bg: var(--lt-color-neutral-800); } :host([appearance='filled'][variant='success']) { --_bg: var(--lt-interactive-success-bg); --_color: var(--lt-text-on-success); --_hover-bg: var(--lt-interactive-success-bg-hover); --_hover-color: var(--lt-text-on-success); --_active-bg: var(--lt-interactive-success-bg-active); } :host([appearance='filled'][variant='warning']) { --_bg: var(--lt-interactive-warning-bg); --_color: var(--lt-text-on-warning); --_hover-bg: var(--lt-interactive-warning-bg-hover); --_hover-color: var(--lt-text-on-warning); --_active-bg: var(--lt-interactive-warning-bg-active); } :host([appearance='filled'][variant='error']) { --_bg: var(--lt-interactive-error-bg); --_color: var(--lt-text-on-error); --_hover-bg: var(--lt-interactive-error-bg-hover); --_hover-color: var(--lt-text-on-error); --_active-bg: var(--lt-interactive-error-bg-active); } :host([appearance='filled'][variant='info']) { --_bg: var(--lt-interactive-info-bg); --_color: var(--lt-text-on-info); --_hover-bg: var(--lt-interactive-info-bg-hover); --_hover-color: var(--lt-text-on-info); --_active-bg: var(--lt-interactive-info-bg-active); } /* ── outlined ─────────────────────────────────────────────── */ :host([appearance='outlined'][variant='primary']) { --_color: var(--lt-text-primary); --_border-color: var(--lt-border-primary-strong); --_hover-bg: var(--lt-bg-primary-subtle); --_hover-color: var(--lt-text-primary); --_active-bg: var(--lt-bg-primary-subtle); } :host([appearance='outlined'][variant='secondary']) { --_color: var(--lt-text-secondary); --_border-color: var(--lt-border-secondary-strong); --_hover-bg: var(--lt-bg-secondary-subtle); --_hover-color: var(--lt-text-secondary); --_active-bg: var(--lt-bg-secondary-subtle); } :host([appearance='outlined'][variant='neutral']) { --_color: var(--lt-text-neutral); --_border-color: var(--lt-border-strong); --_hover-bg: var(--lt-bg-subtle); --_hover-color: var(--lt-text-default); --_active-bg: var(--lt-bg-subtle); } :host([appearance='outlined'][variant='success']) { --_color: var(--lt-text-success); --_border-color: var(--lt-border-success-strong); --_hover-bg: var(--lt-bg-success-subtle); --_hover-color: var(--lt-text-success); --_active-bg: var(--lt-bg-success-subtle); } :host([appearance='outlined'][variant='warning']) { --_color: var(--lt-text-warning); --_border-color: var(--lt-border-warning-strong); --_hover-bg: var(--lt-bg-warning-subtle); --_hover-color: var(--lt-text-warning); --_active-bg: var(--lt-bg-warning-subtle); } :host([appearance='outlined'][variant='error']) { --_color: var(--lt-text-error); --_border-color: var(--lt-border-error-strong); --_hover-bg: var(--lt-bg-error-subtle); --_hover-color: var(--lt-text-error); --_active-bg: var(--lt-bg-error-subtle); } :host([appearance='outlined'][variant='info']) { --_color: var(--lt-text-info); --_border-color: var(--lt-border-info-strong); --_hover-bg: var(--lt-bg-info-subtle); --_hover-color: var(--lt-text-info); --_active-bg: var(--lt-bg-info-subtle); } /* round shape */ :host([round]) [part='base'] { border-radius: 50%; } `"
|
|
4241
|
+
"default": "css` :host { display: inline-flex; /* Internal state props — set per variant/appearance below */ --_color: var(--lt-text-subtle); --_bg: transparent; --_border-color: transparent; --_hover-bg: var(--lt-bg-subtle); --_hover-color: var(--lt-text-default); --_active-bg: var(--lt-bg-subtle); } [part='base'] { align-items: center; background: var(--lt-icon-button-bg, var(--_bg)); border-radius: var(--lt-border-radius); border: var(--lt-border-width, 1px) solid var(--lt-icon-button-border-color, var(--_border-color)); box-sizing: border-box; color: var(--lt-icon-button-color, var(--_color)); cursor: pointer; display: inline-flex; justify-content: center; padding: 0; transition: background-color 120ms ease, border-color 120ms ease, transform 50ms ease; user-select: none; } [part='base']:hover:not([disabled]) { background: var(--lt-icon-button-hover-bg, var(--_hover-bg)); color: var(--lt-icon-button-hover-color, var(--lt-icon-button-color, var(--_hover-color))); } [part='base']:active { transform: translateY(1px); } [part='base']:active:not([disabled]) { background: var(--lt-icon-button-hover-bg, var(--_active-bg)); } [part='base']:focus-visible { outline: 3px solid var(--lt-border-focus); outline-offset: 2px; } [part='base'][disabled] { cursor: not-allowed; opacity: 0.5; pointer-events: none; transform: none; } a[part='base'] { text-decoration: none; color: inherit; } /* sizes */ :host([size='sm']) [part='base'] { height: 28px; width: 28px; } :host([size='md']) [part='base'] { height: 36px; width: 36px; } :host([size='lg']) [part='base'] { height: 44px; width: 44px; } /* ── ghost ────────────────────────────────────────────────── */ :host([appearance='ghost'][variant='primary']) { --_color: var(--lt-text-primary); --_hover-bg: var(--lt-bg-primary-subtle); --_hover-color: var(--lt-text-primary); --_active-bg: var(--lt-bg-primary-subtle); } :host([appearance='ghost'][variant='secondary']) { --_color: var(--lt-text-secondary); --_hover-bg: var(--lt-bg-secondary-subtle); --_hover-color: var(--lt-text-secondary); --_active-bg: var(--lt-bg-secondary-subtle); } :host([appearance='ghost'][variant='success']) { --_color: var(--lt-text-success); --_hover-bg: var(--lt-bg-success-subtle); --_hover-color: var(--lt-text-success); --_active-bg: var(--lt-bg-success-subtle); } :host([appearance='ghost'][variant='warning']) { --_color: var(--lt-text-warning); --_hover-bg: var(--lt-bg-warning-subtle); --_hover-color: var(--lt-text-warning); --_active-bg: var(--lt-bg-warning-subtle); } :host([appearance='ghost'][variant='error']) { --_color: var(--lt-text-error); --_hover-bg: var(--lt-bg-error-subtle); --_hover-color: var(--lt-text-error); --_active-bg: var(--lt-bg-error-subtle); } :host([appearance='ghost'][variant='info']) { --_color: var(--lt-text-info); --_hover-bg: var(--lt-bg-info-subtle); --_hover-color: var(--lt-text-info); --_active-bg: var(--lt-bg-info-subtle); } /* ── filled ───────────────────────────────────────────────── */ :host([appearance='filled'][variant='primary']) { --_bg: var(--lt-interactive-primary-bg); --_color: var(--lt-text-on-primary); --_hover-bg: var(--lt-interactive-primary-bg-hover); --_hover-color: var(--lt-text-on-primary); --_active-bg: var(--lt-interactive-primary-bg-active); } :host([appearance='filled'][variant='secondary']) { --_bg: var(--lt-interactive-secondary-bg); --_color: var(--lt-text-on-secondary); --_hover-bg: var(--lt-interactive-secondary-bg-hover); --_hover-color: var(--lt-text-on-secondary); --_active-bg: var(--lt-interactive-secondary-bg-active); } :host([appearance='filled'][variant='neutral']) { --_bg: var(--lt-color-neutral-500); --_color: var(--lt-color-neutral-50); --_hover-bg: var(--lt-color-neutral-700); --_hover-color: var(--lt-color-neutral-50); --_active-bg: var(--lt-color-neutral-800); } :host([appearance='filled'][variant='success']) { --_bg: var(--lt-interactive-success-bg); --_color: var(--lt-text-on-success); --_hover-bg: var(--lt-interactive-success-bg-hover); --_hover-color: var(--lt-text-on-success); --_active-bg: var(--lt-interactive-success-bg-active); } :host([appearance='filled'][variant='warning']) { --_bg: var(--lt-interactive-warning-bg); --_color: var(--lt-text-on-warning); --_hover-bg: var(--lt-interactive-warning-bg-hover); --_hover-color: var(--lt-text-on-warning); --_active-bg: var(--lt-interactive-warning-bg-active); } :host([appearance='filled'][variant='error']) { --_bg: var(--lt-interactive-error-bg); --_color: var(--lt-text-on-error); --_hover-bg: var(--lt-interactive-error-bg-hover); --_hover-color: var(--lt-text-on-error); --_active-bg: var(--lt-interactive-error-bg-active); } :host([appearance='filled'][variant='info']) { --_bg: var(--lt-interactive-info-bg); --_color: var(--lt-text-on-info); --_hover-bg: var(--lt-interactive-info-bg-hover); --_hover-color: var(--lt-text-on-info); --_active-bg: var(--lt-interactive-info-bg-active); } /* ── outlined ─────────────────────────────────────────────── */ :host([appearance='outlined'][variant='primary']) { --_color: var(--lt-text-primary); --_border-color: var(--lt-border-primary-strong); --_hover-bg: var(--lt-bg-primary-subtle); --_hover-color: var(--lt-text-primary); --_active-bg: var(--lt-bg-primary-subtle); } :host([appearance='outlined'][variant='secondary']) { --_color: var(--lt-text-secondary); --_border-color: var(--lt-border-secondary-strong); --_hover-bg: var(--lt-bg-secondary-subtle); --_hover-color: var(--lt-text-secondary); --_active-bg: var(--lt-bg-secondary-subtle); } :host([appearance='outlined'][variant='neutral']) { --_color: var(--lt-text-neutral); --_border-color: var(--lt-border-strong); --_hover-bg: var(--lt-bg-subtle); --_hover-color: var(--lt-text-default); --_active-bg: var(--lt-bg-subtle); } :host([appearance='outlined'][variant='success']) { --_color: var(--lt-text-success); --_border-color: var(--lt-border-success-strong); --_hover-bg: var(--lt-bg-success-subtle); --_hover-color: var(--lt-text-success); --_active-bg: var(--lt-bg-success-subtle); } :host([appearance='outlined'][variant='warning']) { --_color: var(--lt-text-warning); --_border-color: var(--lt-border-warning-strong); --_hover-bg: var(--lt-bg-warning-subtle); --_hover-color: var(--lt-text-warning); --_active-bg: var(--lt-bg-warning-subtle); } :host([appearance='outlined'][variant='error']) { --_color: var(--lt-text-error); --_border-color: var(--lt-border-error-strong); --_hover-bg: var(--lt-bg-error-subtle); --_hover-color: var(--lt-text-error); --_active-bg: var(--lt-bg-error-subtle); } :host([appearance='outlined'][variant='info']) { --_color: var(--lt-text-info); --_border-color: var(--lt-border-info-strong); --_hover-bg: var(--lt-bg-info-subtle); --_hover-color: var(--lt-text-info); --_active-bg: var(--lt-bg-info-subtle); } /* bordered — adds a border on top of whatever appearance is active; a no-op on outlined, which already sets the same border color. */ :host([bordered][variant='primary']) { --_border-color: var(--lt-border-primary-strong); } :host([bordered][variant='secondary']) { --_border-color: var(--lt-border-secondary-strong); } :host([bordered][variant='neutral']) { --_border-color: var(--lt-border-strong); } :host([bordered][variant='success']) { --_border-color: var(--lt-border-success-strong); } :host([bordered][variant='warning']) { --_border-color: var(--lt-border-warning-strong); } :host([bordered][variant='error']) { --_border-color: var(--lt-border-error-strong); } :host([bordered][variant='info']) { --_border-color: var(--lt-border-info-strong); } /* round shape */ :host([round]) [part='base'] { border-radius: 50%; } `"
|
|
4209
4242
|
}
|
|
4210
4243
|
],
|
|
4211
4244
|
"exports": [
|
|
@@ -4276,6 +4309,15 @@
|
|
|
4276
4309
|
"default": "'ghost'",
|
|
4277
4310
|
"description": "Visual treatment."
|
|
4278
4311
|
},
|
|
4312
|
+
{
|
|
4313
|
+
"kind": "field",
|
|
4314
|
+
"name": "bordered",
|
|
4315
|
+
"type": {
|
|
4316
|
+
"text": "boolean"
|
|
4317
|
+
},
|
|
4318
|
+
"default": "false",
|
|
4319
|
+
"description": "Adds a variant-colored border on top of the current appearance. A no-op on\n`outlined` (which already has one); adds a border to `filled`/`ghost`."
|
|
4320
|
+
},
|
|
4279
4321
|
{
|
|
4280
4322
|
"kind": "field",
|
|
4281
4323
|
"name": "size",
|
|
@@ -4856,7 +4898,7 @@
|
|
|
4856
4898
|
{
|
|
4857
4899
|
"kind": "variable",
|
|
4858
4900
|
"name": "listStyles",
|
|
4859
|
-
"default": "css` :host { display: block; font-family: var(--lt-typography-
|
|
4901
|
+
"default": "css` :host { display: block; font-family: var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif); --list-marker-color: var(--lt-color-neutral-500); } ul, ol { margin: 0; padding: 0; list-style-position: outside; color: var(--lt-text-default); } ul { padding-left: var(--lt-spacing-5); } ol { padding-left: var(--lt-spacing-5); } ::slotted(li), ::slotted(lt-list-item) { margin-bottom: var(--lt-spacing-2); } ::slotted(li:last-child), ::slotted(lt-list-item:last-child) { margin-bottom: 0; } ::slotted(lt-list) { display: block; margin-top: var(--lt-spacing-2); margin-bottom: var(--lt-spacing-2); padding-left: var(--lt-spacing-5); font-size: 0.9em; } /* No marker */ :host([no-marker]) ul, :host([no-marker]) ol { list-style: none; padding-left: 0; } /* Divider */ :host([divider]) ::slotted(lt-list-item) { border-bottom: 1px solid var(--lt-border-default); padding-bottom: var(--lt-spacing-2); } :host([divider]) ::slotted(lt-list-item:last-child) { border-bottom: none; padding-bottom: 0; } ::slotted(lt-list:first-child) { margin-top: var(--lt-spacing-2); } ::slotted(lt-list:last-child) { margin-bottom: 0; } ul ::slotted(li)::marker { color: var(--list-marker-color); } ol ::slotted(li)::marker { color: var(--list-marker-color); } /* Size variants */ :host([size='sm']) ul, :host([size='sm']) ol { font-size: 0.875rem; line-height: 1.5; } :host([size='sm']) ::slotted(li), :host([size='sm']) ::slotted(lt-list-item) { margin-bottom: var(--lt-spacing-1); } :host([size='md']) ul, :host([size='md']) ol { font-size: 1rem; line-height: 1.6; } :host([size='md']) ::slotted(li), :host([size='md']) ::slotted(lt-list-item) { margin-bottom: var(--lt-spacing-2); } :host([size='lg']) ul, :host([size='lg']) ol { font-size: 1.125rem; line-height: 1.7; } :host([size='lg']) ::slotted(li), :host([size='lg']) ::slotted(lt-list-item) { margin-bottom: var(--lt-spacing-3); } `"
|
|
4860
4902
|
}
|
|
4861
4903
|
],
|
|
4862
4904
|
"exports": [
|
|
@@ -5346,7 +5388,7 @@
|
|
|
5346
5388
|
{
|
|
5347
5389
|
"kind": "variable",
|
|
5348
5390
|
"name": "paginationStyles",
|
|
5349
|
-
"default": "css` :host { display: inline-flex; font-family: var(--lt-typography-
|
|
5391
|
+
"default": "css` :host { display: inline-flex; font-family: var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif); } nav { align-items: center; display: flex; gap: var(--lt-spacing-1); } button { align-items: center; background: transparent; border-radius: var(--lt-border-radius); border: 1px solid transparent; color: var(--lt-text-default); cursor: pointer; display: inline-flex; font-family: inherit; font-weight: 500; justify-content: center; line-height: 1; transition: background 120ms ease, border-color 120ms ease, color 120ms ease; user-select: none; } /* Sizes */ :host([size='sm']) button { font-size: 0.75rem; height: 28px; min-width: 28px; padding: 0 var(--lt-spacing-1); } :host([size='md']) button, :host(:not([size])) button { font-size: 0.8125rem; height: 36px; min-width: 36px; padding: 0 var(--lt-spacing-2); } :host([size='lg']) button { font-size: 0.9375rem; height: 44px; min-width: 44px; padding: 0 var(--lt-spacing-3); } button:hover:not(:disabled) { background: var(--lt-bg-neutral-subtle); border-color: var(--lt-border-default); } button[aria-current='page'] { background: var(--lt-bg-primary-subtle); border-color: var(--lt-border-primary); color: var(--lt-color-primary-700); font-weight: 600; } button.ellipsis { cursor: default; pointer-events: none; } button:disabled { color: var(--lt-color-neutral-400); cursor: not-allowed; } :host([disabled]) button { color: var(--lt-color-neutral-400); cursor: not-allowed; pointer-events: none; } `"
|
|
5350
5392
|
}
|
|
5351
5393
|
],
|
|
5352
5394
|
"exports": [
|
|
@@ -5633,7 +5675,7 @@
|
|
|
5633
5675
|
{
|
|
5634
5676
|
"kind": "variable",
|
|
5635
5677
|
"name": "radioGroupStyles",
|
|
5636
|
-
"default": "css` :host { display: block; font-family: var(--lt-typography-
|
|
5678
|
+
"default": "css` :host { display: block; font-family: var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif); } .radio-group { display: flex; flex-direction: column; gap: var(--lt-spacing-2); } .label { color: var(--lt-text-default); margin-bottom: var(--lt-spacing-1); } .required-indicator { color: var(--lt-color-error-500); margin-left: var(--lt-spacing-1); } .radios-container { display: flex; gap: var(--lt-spacing-3); } :host([orientation='vertical']) .radios-container { flex-direction: column; } :host([orientation='horizontal']) .radios-container { flex-direction: row; flex-wrap: wrap; } .helper-text { color: var(--lt-text-subtle); margin-top: var(--lt-spacing-1); } .helper-text::part(base) { font-weight: 200; } :host([error]) .helper-text { color: var(--lt-text-error); } `"
|
|
5637
5679
|
}
|
|
5638
5680
|
],
|
|
5639
5681
|
"exports": [
|
|
@@ -5852,7 +5894,7 @@
|
|
|
5852
5894
|
{
|
|
5853
5895
|
"kind": "variable",
|
|
5854
5896
|
"name": "radioStyles",
|
|
5855
|
-
"default": "css` :host { display: inline-block; font-family: var(--lt-typography-
|
|
5897
|
+
"default": "css` :host { display: inline-block; font-family: var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif); } .radio-wrapper { align-items: center; cursor: pointer; display: inline-flex; gap: var(--lt-spacing-2); } .radio-container { display: inline-flex; position: relative; } :host([label-position='left']) .radio-wrapper { flex-direction: row-reverse; } :host([disabled]) .radio-wrapper { cursor: not-allowed; opacity: 0.6; } input[type='radio'] { appearance: none; border-radius: 50%; border: 2px solid var(--lt-border-strong); cursor: pointer; flex-shrink: 0; margin: 0; position: relative; transition: background-color 120ms ease, border-color 120ms ease; } input[type='radio']:hover:not(:disabled) { border-color: var(--lt-color-neutral-600); } input[type='radio']:focus-visible { outline: 3px solid var(--lt-border-focus); outline-offset: 2px; } input[type='radio']:disabled { cursor: not-allowed; } .dot { background: white; border-radius: 50%; display: none; pointer-events: none; position: absolute; } input[type='radio']:checked ~ .dot { display: block; } .label { color: var(--lt-text-default); user-select: none; } /* Size variants */ :host([size='sm']) input[type='radio'] { height: 16px; width: 16px; } :host([size='sm']) .dot { height: 8px; width: 8px; left: 4px; top: 4px; } :host([size='sm']) .label { font-size: 0.875rem; } :host([size='md']) input[type='radio'] { height: 20px; width: 20px; } :host([size='md']) .dot { height: 10px; width: 10px; left: 5px; top: 5px; } :host([size='md']) .label { font-size: 1rem; } :host([size='lg']) input[type='radio'] { height: 24px; width: 24px; } :host([size='lg']) .dot { height: 12px; width: 12px; left: 6px; top: 6px; } :host([size='lg']) .label { font-size: 1.0625rem; } /* Variant styles */ :host([variant='primary']) input[type='radio']:checked { background: var(--lt-interactive-primary-bg); border-color: var(--lt-interactive-primary-bg); } :host([variant='primary']) input[type='radio']:checked:hover:not(:disabled) { background: var(--lt-interactive-primary-bg-hover); border-color: var(--lt-interactive-primary-bg-hover); } :host([variant='secondary']) input[type='radio']:checked { background: var(--lt-interactive-secondary-bg); border-color: var(--lt-interactive-secondary-bg); } :host([variant='secondary']) input[type='radio']:checked:hover:not(:disabled) { background: var(--lt-interactive-secondary-bg-hover); border-color: var(--lt-interactive-secondary-bg-hover); } :host([variant='success']) input[type='radio']:checked { background: var(--lt-interactive-success-bg); border-color: var(--lt-interactive-success-bg); } :host([variant='success']) input[type='radio']:checked:hover:not(:disabled) { background: var(--lt-interactive-success-bg-hover); border-color: var(--lt-interactive-success-bg-hover); } :host([variant='error']) input[type='radio']:checked { background: var(--lt-interactive-error-bg); border-color: var(--lt-interactive-error-bg); } :host([variant='error']) input[type='radio']:checked:hover:not(:disabled) { background: var(--lt-interactive-error-bg-hover); border-color: var(--lt-interactive-error-bg-hover); } :host([variant='info']) input[type='radio']:checked { background: var(--lt-interactive-info-bg); border-color: var(--lt-interactive-info-bg); } :host([variant='info']) input[type='radio']:checked:hover:not(:disabled) { background: var(--lt-interactive-info-bg-hover); border-color: var(--lt-interactive-info-bg-hover); } `"
|
|
5856
5898
|
}
|
|
5857
5899
|
],
|
|
5858
5900
|
"exports": [
|
|
@@ -6092,7 +6134,7 @@
|
|
|
6092
6134
|
"type": {
|
|
6093
6135
|
"text": "array"
|
|
6094
6136
|
},
|
|
6095
|
-
"default": "[ floatingPanelReset, css` :host { display: inline-block; font-family: var(--lt-typography-
|
|
6137
|
+
"default": "[ floatingPanelReset, css` :host { display: inline-block; font-family: var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif); position: relative; width: 100%; } .wrapper { display: flex; flex-direction: column; gap: var(--lt-spacing-2); } label { color: var(--lt-text-default); } .required-indicator { color: var(--lt-color-error-500); margin-left: var(--lt-spacing-1); } .select-container { position: relative; width: 100%; } .select-trigger { align-items: center; background: var(--lt-bg-subtle); border-radius: var(--lt-border-radius); border: var(--lt-border-width, 1px) solid var(--lt-border-default); box-sizing: border-box; cursor: pointer; display: flex; font-family: inherit; justify-content: space-between; transition: border-color 120ms ease, box-shadow 120ms ease; width: 100%; } .select-trigger:hover:not([aria-disabled='true']) { border-color: var(--lt-border-strong); } .select-trigger:focus-visible { border-color: var(--lt-interactive-primary-bg); box-shadow: 0 0 0 3px var(--lt-border-focus); outline: none; } .select-trigger[aria-disabled='true'] { cursor: not-allowed; opacity: 0.6; } .select-value { color: var(--lt-text-default); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .select-value.placeholder { color: var(--lt-text-muted); } .icon-end { color: var(--lt-text-subtle); flex-shrink: 0; transition: transform 120ms ease; } :host([open]) .icon-end { transform: rotate(180deg); } .dropdown { display: none; max-height: 300px; z-index: 1000; } .options-container { max-height: 300px; overflow: hidden auto; } .option { align-items: center; background: transparent; border: none; border-radius: var(--lt-border-radius); box-sizing: border-box; color: var(--lt-text-default); cursor: pointer; display: flex; font-family: inherit; text-align: left; transition: background-color 80ms ease; width: 100%; } .option:hover:not([disabled]) { background: var(--lt-bg-surface); } .option:focus-visible { background: var(--lt-bg-surface); outline: 2px solid var(--lt-interactive-primary-bg); outline-offset: -2px; } .option[aria-selected='true'] { background: var(--lt-bg-primary-subtle); color: var(--lt-text-primary); font-weight: 600; } .option[disabled] { color: var(--lt-text-muted); cursor: not-allowed; opacity: 0.6; } .helper-text::part(base) { font-weight: 200; } /* Size variants */ :host([size='sm']) .select-trigger { font-size: 0.875rem; height: 32px; padding: 0 var(--lt-spacing-3); } :host([size='sm']) .option { font-size: 0.875rem; padding: var(--lt-spacing-2) var(--lt-spacing-3); } :host([size='md']) .select-trigger { font-size: 1rem; height: 40px; padding: 0 var(--lt-spacing-4); } :host([size='md']) .option { font-size: 1rem; padding: var(--lt-spacing-3) var(--lt-spacing-4); } :host([size='lg']) .select-trigger { font-size: 1.0625rem; height: 48px; padding: 0 var(--lt-spacing-5); } :host([size='lg']) .option { font-size: 1.0625rem; padding: var(--lt-spacing-4) var(--lt-spacing-5); } /* Variant styles */ :host([variant='success']) .select-trigger { border-color: var(--lt-border-success-strong); } :host([variant='success']) .helper-text { color: var(--lt-text-success); } :host([variant='warning']) .select-trigger { border-color: var(--lt-border-warning-strong); } :host([variant='warning']) .helper-text { color: var(--lt-text-warning); } :host([variant='error']) .select-trigger { border-color: var(--lt-border-error-strong); } :host([variant='error']) .helper-text { color: var(--lt-text-error); } :host([variant='default']) .helper-text { color: var(--lt-text-subtle); } ` ]"
|
|
6096
6138
|
}
|
|
6097
6139
|
],
|
|
6098
6140
|
"exports": [
|
|
@@ -6581,7 +6623,7 @@
|
|
|
6581
6623
|
{
|
|
6582
6624
|
"kind": "variable",
|
|
6583
6625
|
"name": "sidepanelStyles",
|
|
6584
|
-
"default": "css` :host { display: contents; } /* ── Overlay ────────────────────────────────────────────────────────────── */ [part='overlay'] { position: fixed; inset: 0; background: rgba(0, 0, 0, var(--lt-sidepanel-overlay-opacity, 0.45)); z-index: 400; opacity: 0; pointer-events: none; transition: opacity 200ms ease; } /* ── Panel ──────────────────────────────────────────────────────────────── */ [part='panel'] { position: fixed; background: var(--lt-bg-default); display: flex; flex-direction: column; z-index: 401; pointer-events: none; transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1); } /* ── Anchors — initial off-screen positions ─────────────────────────────── */ :host([anchor='left']) [part='panel'], :host(:not([anchor])) [part='panel'] { inset-block: 0; left: 0; transform: translateX(-100%); box-shadow: 4px 0 24px rgba(0, 0, 0, 0.12); } :host([anchor='right']) [part='panel'] { inset-block: 0; right: 0; transform: translateX(100%); box-shadow: -4px 0 24px rgba(0, 0, 0, 0.12); } :host([anchor='top']) [part='panel'] { inset-inline: 0; top: 0; transform: translateY(-100%); box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12); } :host([anchor='bottom']) [part='panel'] { inset-inline: 0; bottom: 0; transform: translateY(100%); box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.12); } /* ── Open state — must come after anchors to win the cascade ────────────── */ :host([open]) [part='overlay'] { opacity: 1; pointer-events: auto; } :host([open]) [part='panel'] { transform: translate(0, 0); pointer-events: auto; } /* ── Header ─────────────────────────────────────────────────────────────── */ .header { display: flex; align-items: center; gap: var(--lt-spacing-4); padding: var(--lt-spacing-4) var(--lt-spacing-5); border-bottom: 1px solid var(--lt-border-default); flex-shrink: 0; } .panel-label { flex: 1; color: var(--lt-text-default); } .close-button { flex-shrink: 0; margin-left: auto; } /* ── Body ───────────────────────────────────────────────────────────────── */ .body { flex: 1; overflow-y: auto; } /* ── Reduced motion ─────────────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { [part='overlay'], [part='panel'] { transition: none; } } `"
|
|
6626
|
+
"default": "css` :host { display: contents; } /* ── Overlay ────────────────────────────────────────────────────────────── */ [part='overlay'] { position: fixed; inset: 0; background: rgba(0, 0, 0, var(--lt-sidepanel-overlay-opacity, 0.45)); z-index: 400; opacity: 0; pointer-events: none; transition: opacity 200ms ease; } /* ── Panel ──────────────────────────────────────────────────────────────── */ [part='panel'] { position: fixed; background: var(--lt-bg-default); display: flex; flex-direction: column; z-index: 401; pointer-events: none; transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1); } /* ── Anchors — initial off-screen positions ─────────────────────────────── */ :host([anchor='left']) [part='panel'], :host(:not([anchor])) [part='panel'] { inset-block: 0; left: 0; transform: translateX(-100%); box-shadow: var(--lt-sidepanel-shadow, 4px 0 24px rgba(0, 0, 0, 0.12)); } :host([anchor='right']) [part='panel'] { inset-block: 0; right: 0; transform: translateX(100%); box-shadow: var(--lt-sidepanel-shadow, -4px 0 24px rgba(0, 0, 0, 0.12)); } :host([anchor='top']) [part='panel'] { inset-inline: 0; top: 0; transform: translateY(-100%); box-shadow: var(--lt-sidepanel-shadow, 0 4px 24px rgba(0, 0, 0, 0.12)); } :host([anchor='bottom']) [part='panel'] { inset-inline: 0; bottom: 0; transform: translateY(100%); box-shadow: var(--lt-sidepanel-shadow, 0 -4px 24px rgba(0, 0, 0, 0.12)); } /* ── Open state — must come after anchors to win the cascade ────────────── */ :host([open]) [part='overlay'] { opacity: 1; pointer-events: auto; } :host([open]) [part='panel'] { transform: translate(0, 0); pointer-events: auto; } /* ── Header ─────────────────────────────────────────────────────────────── */ .header { display: flex; align-items: center; gap: var(--lt-spacing-4); padding: var(--lt-spacing-4) var(--lt-spacing-5); border-bottom: 1px solid var(--lt-border-default); flex-shrink: 0; } .panel-label { flex: 1; color: var(--lt-text-default); } .close-button { flex-shrink: 0; margin-left: auto; } /* ── Body ───────────────────────────────────────────────────────────────── */ .body { flex: 1; overflow-y: auto; padding: var(--lt-spacing-5); } /* ── Reduced motion ─────────────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { [part='overlay'], [part='panel'] { transition: none; } } `"
|
|
6585
6627
|
}
|
|
6586
6628
|
],
|
|
6587
6629
|
"exports": [
|
|
@@ -6603,6 +6645,12 @@
|
|
|
6603
6645
|
"kind": "class",
|
|
6604
6646
|
"description": "A slide-in panel anchored to any edge of the viewport, with a backdrop overlay.",
|
|
6605
6647
|
"name": "SidePanel",
|
|
6648
|
+
"cssProperties": [
|
|
6649
|
+
{
|
|
6650
|
+
"description": "Overrides the panel's box-shadow, for all anchor positions.",
|
|
6651
|
+
"name": "--lt-sidepanel-shadow"
|
|
6652
|
+
}
|
|
6653
|
+
],
|
|
6606
6654
|
"cssParts": [
|
|
6607
6655
|
{
|
|
6608
6656
|
"description": "The backdrop scrim behind the panel",
|
|
@@ -6947,7 +6995,7 @@
|
|
|
6947
6995
|
{
|
|
6948
6996
|
"kind": "variable",
|
|
6949
6997
|
"name": "sliderStyles",
|
|
6950
|
-
"default": "css` :host { display: block; font-family: var(--lt-typography-
|
|
6998
|
+
"default": "css` :host { display: block; font-family: var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif); width: 100%; } label { color: var(--lt-text-default); display: block; margin-bottom: var(--lt-spacing-1); user-select: none; } .track-wrap { align-items: center; display: flex; width: 100%; } /* lt-tooltip fills the track-wrap so the input stays full-width */ .track-wrap lt-tooltip { display: block; width: 100%; } /* Position the tooltip above the thumb rather than the track center */ lt-tooltip::part(tooltip) { left: var(--_thumb-left, 50%); } input[type='range'] { appearance: none; background: linear-gradient( to right, var(--lt-interactive-primary-bg) var(--lt-slider-fill, 0%), var(--lt-border-strong) var(--lt-slider-fill, 0%) ); border-radius: 9999px; cursor: pointer; display: block; height: var(--lt-slider-track-height, 6px); outline: none; transition: background 0ms; width: 100%; } input[type='range']:focus-visible { outline: 3px solid var(--lt-border-focus); outline-offset: 3px; } input[type='range']:hover:not(:disabled) { --lt-interactive-primary-bg: var(--lt-interactive-primary-bg-hover); } input[type='range']:active:not(:disabled) { --lt-interactive-primary-bg: var(--lt-interactive-primary-bg-active); } /* Thumb — WebKit */ input[type='range']::-webkit-slider-thumb { appearance: none; background: var(--lt-interactive-primary-bg); border-radius: 50%; border: 2px solid white; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25); cursor: pointer; height: var(--lt-slider-thumb-size, 18px); transition: transform 100ms ease; width: var(--lt-slider-thumb-size, 18px); } input[type='range']::-webkit-slider-thumb:hover { transform: scale(1.15); } input[type='range']:active::-webkit-slider-thumb { transform: scale(1.05); } /* Thumb — Firefox */ input[type='range']::-moz-range-thumb { appearance: none; background: var(--lt-interactive-primary-bg); border-radius: 50%; border: 2px solid white; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25); cursor: pointer; height: var(--lt-slider-thumb-size, 18px); transition: transform 100ms ease; width: var(--lt-slider-thumb-size, 18px); } /* Track — Firefox */ input[type='range']::-moz-range-track { background: var(--lt-border-strong); border-radius: 9999px; height: var(--lt-slider-track-height, 6px); } input[type='range']::-moz-range-progress { background: var(--lt-interactive-primary-bg); border-radius: 9999px; height: var(--lt-slider-track-height, 6px); } /* Sizes */ :host([size='sm']) { --lt-slider-track-height: 4px; --lt-slider-thumb-size: 14px; } :host([size='md']) { --lt-slider-track-height: 6px; --lt-slider-thumb-size: 18px; } :host([size='lg']) { --lt-slider-track-height: 8px; --lt-slider-thumb-size: 22px; } /* Disabled */ :host([disabled]) { opacity: 0.5; } :host([disabled]) input[type='range'] { cursor: not-allowed; pointer-events: none; } `"
|
|
6951
6999
|
}
|
|
6952
7000
|
],
|
|
6953
7001
|
"exports": [
|
|
@@ -7207,7 +7255,7 @@
|
|
|
7207
7255
|
{
|
|
7208
7256
|
"kind": "variable",
|
|
7209
7257
|
"name": "snackbarStyles",
|
|
7210
|
-
"default": "css` :host { display: block; bottom: 24px; left: 50%; max-width: calc(100vw - 48px); opacity: 0; position: fixed; transform: translateX(-50%) translateY(8px); transition: opacity 200ms ease, transform 200ms ease, visibility 200ms ease; visibility: hidden; width: max-content; z-index: 9000; } :host([open]) { opacity: 1; transform: translateX(-50%) translateY(0); visibility: visible; } /* ── Layout ──────────────────────────────────────────────── */ .inner { align-items: center; color: var(--lt-text-inverse); display: flex; font-family: var(--lt-typography-
|
|
7258
|
+
"default": "css` :host { display: block; bottom: 24px; left: 50%; max-width: calc(100vw - 48px); opacity: 0; position: fixed; transform: translateX(-50%) translateY(8px); transition: opacity 200ms ease, transform 200ms ease, visibility 200ms ease; visibility: hidden; width: max-content; z-index: 9000; } :host([open]) { opacity: 1; transform: translateX(-50%) translateY(0); visibility: visible; } /* ── Layout ──────────────────────────────────────────────── */ .inner { align-items: center; color: var(--lt-text-inverse); display: flex; font-family: var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif); font-size: 0.875rem; gap: var(--lt-spacing-2); line-height: 1.4; padding: var(--lt-spacing-3) var(--lt-spacing-4); } /* ── Variant text colors ─────────────────────────────────── */ :host([variant='success']) .inner { color: var(--lt-text-on-success); } :host([variant='warning']) .inner { color: var(--lt-text-on-warning); } :host([variant='error']) .inner { color: var(--lt-text-on-error); } :host([variant='info']) .inner { color: var(--lt-text-on-info); } /* ── Variant icon ────────────────────────────────────────── */ .variant-icon { flex-shrink: 0; font-size: 1.125rem; } /* ── Message ─────────────────────────────────────────────── */ .message { flex: 1; } /* ── Action button ───────────────────────────────────────── */ .action { background: transparent; border: none; color: inherit; cursor: pointer; font-family: inherit; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.05em; opacity: 0.85; padding: 0 var(--lt-spacing-1); text-transform: uppercase; } .action:hover { opacity: 1; } /* ── Close button ────────────────────────────────────────── */ .close { align-items: center; background: transparent; border: none; color: inherit; cursor: pointer; display: flex; flex-shrink: 0; justify-content: center; opacity: 0.7; padding: 0; } .close:hover { opacity: 1; } `"
|
|
7211
7259
|
}
|
|
7212
7260
|
],
|
|
7213
7261
|
"exports": [
|
|
@@ -7296,6 +7344,24 @@
|
|
|
7296
7344
|
"default": "''",
|
|
7297
7345
|
"description": "Icon to show before the message. Leave empty for auto (shows variant icon for status variants),\nset to `\"none\"` to suppress, or pass any icon name to override."
|
|
7298
7346
|
},
|
|
7347
|
+
{
|
|
7348
|
+
"kind": "field",
|
|
7349
|
+
"name": "elevation",
|
|
7350
|
+
"type": {
|
|
7351
|
+
"text": "SurfaceElevation"
|
|
7352
|
+
},
|
|
7353
|
+
"default": "'5'",
|
|
7354
|
+
"description": "Elevation level of the internal surface, matching `lt-surface`'s scale."
|
|
7355
|
+
},
|
|
7356
|
+
{
|
|
7357
|
+
"kind": "field",
|
|
7358
|
+
"name": "appearance",
|
|
7359
|
+
"type": {
|
|
7360
|
+
"text": "SurfaceAppearance"
|
|
7361
|
+
},
|
|
7362
|
+
"default": "'filled'",
|
|
7363
|
+
"description": "Visual appearance of the internal surface, matching `lt-surface`'s vocabulary."
|
|
7364
|
+
},
|
|
7299
7365
|
{
|
|
7300
7366
|
"kind": "field",
|
|
7301
7367
|
"name": "_timer",
|
|
@@ -7565,7 +7631,7 @@
|
|
|
7565
7631
|
{
|
|
7566
7632
|
"kind": "variable",
|
|
7567
7633
|
"name": "surfaceStyles",
|
|
7568
|
-
"default": "css` :host { display: block; font-family: var(--lt-typography-
|
|
7634
|
+
"default": "css` :host { display: block; font-family: var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif); } .surface { background: var(--lt-surface-bg, var(--lt-bg-subtle)); border-radius: var(--lt-border-radius); box-sizing: border-box; transition: box-shadow 120ms ease, border-color 120ms ease; } /* Elevation variants */ :host([elevation='0']) .surface { box-shadow: var(--lt-elevation-0); } :host([elevation='1']) .surface { box-shadow: var(--lt-elevation-1); } :host([elevation='2']) .surface { box-shadow: var(--lt-elevation-2); } :host([elevation='3']) .surface { box-shadow: var(--lt-elevation-3); } :host([elevation='4']) .surface { box-shadow: var(--lt-elevation-4); } :host([elevation='5']) .surface { box-shadow: var(--lt-elevation-5); } /* Visual appearances */ :host([appearance='filled']) .surface { border: none; } :host([appearance='outlined']) .surface { background: var(--lt-surface-bg, transparent); border: var(--lt-border-width, 1px) solid var(--lt-border-default); } :host([appearance='outlined']:hover) .surface { border-color: var(--lt-border-strong); } `"
|
|
7569
7635
|
}
|
|
7570
7636
|
],
|
|
7571
7637
|
"exports": [
|
|
@@ -7697,7 +7763,7 @@
|
|
|
7697
7763
|
{
|
|
7698
7764
|
"kind": "variable",
|
|
7699
7765
|
"name": "switchStyles",
|
|
7700
|
-
"default": "css` :host { display: inline-block; font-family: var(--lt-typography-
|
|
7766
|
+
"default": "css` :host { display: inline-block; font-family: var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif); } .switch-wrapper { align-items: center; cursor: pointer; display: inline-flex; gap: var(--lt-spacing-2); } :host([label-position='left']) .switch-wrapper { flex-direction: row-reverse; } :host([disabled]) .switch-wrapper { cursor: not-allowed; opacity: 0.6; } .switch-container { display: inline-flex; position: relative; } input[type='checkbox'] { appearance: none; background: var(--lt-border-default); border-radius: 999px; cursor: pointer; flex-shrink: 0; margin: 0; position: relative; transition: background-color 200ms ease; } input[type='checkbox']:hover:not(:disabled) { background: var(--lt-border-strong); } input[type='checkbox']:focus-visible { outline: 3px solid var(--lt-border-focus); outline-offset: 2px; } input[type='checkbox']:disabled { cursor: not-allowed; } .thumb { background: white; border-radius: 50%; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); pointer-events: none; position: absolute; transition: left 200ms ease; } .label { color: var(--lt-text-default); user-select: none; } /* Size variants */ :host([size='sm']) input[type='checkbox'] { height: 18px; width: 32px; } :host([size='sm']) .thumb { height: 14px; width: 14px; left: 2px; top: 2px; } :host([size='sm']) input[type='checkbox']:checked ~ .thumb { left: 16px; } :host([size='sm']) .label { font-size: 0.875rem; } :host([size='md']) input[type='checkbox'] { height: 22px; width: 40px; } :host([size='md']) .thumb { height: 18px; width: 18px; left: 2px; top: 2px; } :host([size='md']) input[type='checkbox']:checked ~ .thumb { left: 20px; } :host([size='md']) .label { font-size: 1rem; } :host([size='lg']) input[type='checkbox'] { height: 26px; width: 48px; } :host([size='lg']) .thumb { height: 22px; width: 22px; left: 2px; top: 2px; } :host([size='lg']) input[type='checkbox']:checked ~ .thumb { left: 24px; } :host([size='lg']) .label { font-size: 1.0625rem; } /* Variant styles */ :host([variant='primary']) input[type='checkbox']:checked { background: var(--lt-interactive-primary-bg); } :host([variant='primary']) input[type='checkbox']:checked:hover:not(:disabled) { background: var(--lt-interactive-primary-bg-hover); } :host([variant='secondary']) input[type='checkbox']:checked { background: var(--lt-interactive-secondary-bg); } :host([variant='secondary']) input[type='checkbox']:checked:hover:not(:disabled) { background: var(--lt-interactive-secondary-bg-hover); } :host([variant='success']) input[type='checkbox']:checked { background: var(--lt-interactive-success-bg); } :host([variant='success']) input[type='checkbox']:checked:hover:not(:disabled) { background: var(--lt-interactive-success-bg-hover); } :host([variant='error']) input[type='checkbox']:checked { background: var(--lt-interactive-error-bg); } :host([variant='error']) input[type='checkbox']:checked:hover:not(:disabled) { background: var(--lt-interactive-error-bg-hover); } :host([variant='info']) input[type='checkbox']:checked { background: var(--lt-interactive-info-bg); } :host([variant='info']) input[type='checkbox']:checked:hover:not(:disabled) { background: var(--lt-interactive-info-bg-hover); } `"
|
|
7701
7767
|
}
|
|
7702
7768
|
],
|
|
7703
7769
|
"exports": [
|
|
@@ -7932,7 +7998,7 @@
|
|
|
7932
7998
|
{
|
|
7933
7999
|
"kind": "variable",
|
|
7934
8000
|
"name": "tabGroupStyles",
|
|
7935
|
-
"default": "css` :host { display: block; font-family: var(--lt-typography-
|
|
8001
|
+
"default": "css` :host { display: block; font-family: var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif); } .tab-group { display: flex; flex-direction: column; } .tabs-container { border-bottom: 1px solid var(--lt-border-default); display: flex; gap: var(--lt-spacing-1); overflow-x: auto; scrollbar-width: thin; } .tabs-container::-webkit-scrollbar { height: 4px; } .tabs-container::-webkit-scrollbar-track { background: var(--lt-bg-surface); } .tabs-container::-webkit-scrollbar-thumb { background: var(--lt-color-neutral-300); border-radius: 2px; } .panels-container { padding: var(--lt-spacing-4) 0; } ::slotted([slot='panel']) { display: none; } ::slotted([slot='panel'][active]) { display: block; } /* Pills variant */ :host([appearance='pills']) .tabs-container { background: var(--lt-bg-surface); border: none; border-radius: var(--lt-border-radius); gap: var(--lt-spacing-2); padding: var(--lt-spacing-1); } `"
|
|
7936
8002
|
}
|
|
7937
8003
|
],
|
|
7938
8004
|
"exports": [
|
|
@@ -8214,7 +8280,7 @@
|
|
|
8214
8280
|
{
|
|
8215
8281
|
"kind": "variable",
|
|
8216
8282
|
"name": "tabStyles",
|
|
8217
|
-
"default": "css` :host { display: inline-block; font-family: var(--lt-typography-
|
|
8283
|
+
"default": "css` :host { display: inline-block; font-family: var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif); } .tab { align-items: center; background: transparent; border: none; border-bottom: 2px solid transparent; color: var(--lt-text-subtle); cursor: pointer; display: flex; font-family: inherit; font-size: 0.9375rem; font-weight: 600; gap: var(--lt-spacing-2); outline: none; padding: var(--lt-spacing-3) var(--lt-spacing-4); transition: color 150ms ease, border-color 150ms ease; user-select: none; white-space: nowrap; } :host(:not([disabled])):hover .tab { color: var(--lt-text-default); } :host(:focus-visible) .tab { color: var(--lt-text-primary); outline: 2px solid var(--lt-border-focus); outline-offset: 2px; } :host([active]) .tab { border-color: var(--lt-border-primary-strong); color: var(--lt-text-primary); } :host([disabled]) .tab { color: var(--lt-color-neutral-300); cursor: not-allowed; opacity: 0.5; } .icon { font-size: 1.125rem; } /* Size variants */ :host([size='sm']) .tab { font-size: 0.875rem; padding: var(--lt-spacing-2) var(--lt-spacing-3); } :host([size='sm']) .icon { font-size: 1rem; } :host([size='lg']) .tab { font-size: 1rem; padding: var(--lt-spacing-4) var(--lt-spacing-5); } :host([size='lg']) .icon { font-size: 1.25rem; } /* Pills variant (applied by parent tab-group) */ :host([data-variant='pills']) .tab { border-bottom: none; border-radius: var(--lt-border-radius); transition: color 150ms ease, background-color 150ms ease, box-shadow 150ms ease; } :host([data-variant='pills'][active]) .tab { background: var(--lt-bg-default); box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1); color: var(--lt-text-primary); } `"
|
|
8218
8284
|
}
|
|
8219
8285
|
],
|
|
8220
8286
|
"exports": [
|
|
@@ -8428,7 +8494,7 @@
|
|
|
8428
8494
|
{
|
|
8429
8495
|
"kind": "variable",
|
|
8430
8496
|
"name": "tableStyles",
|
|
8431
|
-
"default": "css` :host { display: block; font-family: var(--lt-typography-
|
|
8497
|
+
"default": "css` :host { display: block; font-family: var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif); overflow: hidden; width: 100%; } .table-container { overflow-x: auto; width: 100%; } :host([responsive-mode='scroll']) .table-container { -webkit-overflow-scrolling: touch; } table { border-collapse: collapse; width: 100%; } /* Header */ thead { background: var(--lt-bg-surface); border-bottom: 2px solid var(--lt-border-default); } th { color: var(--lt-text-default); font-weight: 600; text-align: left; white-space: nowrap; } th[data-align='center'] { text-align: center; } th[data-align='right'] { text-align: right; } /* Sortable headers */ th.sortable { cursor: pointer; user-select: none; transition: background-color 120ms ease; } th.sortable:hover { background: var(--lt-bg-overlay); } th.sortable .header-content { align-items: center; display: flex; gap: var(--lt-spacing-2); } th[data-align='center'] .header-content { justify-content: center; } th[data-align='right'] .header-content { justify-content: flex-end; } .sort-icon { color: var(--lt-text-muted); display: inline-flex; flex-shrink: 0; font-size: 0.875rem; opacity: 0; transition: opacity 120ms ease; } th.sortable:hover .sort-icon, th.sorted .sort-icon { opacity: 1; } th.sorted .sort-icon { color: var(--lt-interactive-primary-bg); } /* Body */ tbody tr { border-bottom: 1px solid var(--lt-border-default); transition: background-color 120ms ease; } tbody tr:last-child { border-bottom: none; } :host([hoverable]) tbody tr:hover { background: var(--lt-bg-surface); } :host([striped]) tbody tr:nth-child(even) { background: var(--lt-bg-surface); } :host([striped][hoverable]) tbody tr:nth-child(even):hover { background: var(--lt-bg-overlay); } td { color: var(--lt-text-default); } td[data-align='center'] { text-align: center; } td[data-align='right'] { text-align: right; } /* Density variants */ :host([density='compact']) th, :host([density='compact']) td { padding: var(--lt-spacing-2) var(--lt-spacing-3); } :host([density='normal']) th, :host([density='normal']) td { padding: var(--lt-spacing-3) var(--lt-spacing-4); } :host([density='comfortable']) th, :host([density='comfortable']) td { padding: var(--lt-spacing-4) var(--lt-spacing-5); } /* Sticky columns */ th.sticky { background: var(--lt-bg-surface); box-shadow: 2px 0 4px rgba(0, 0, 0, 0.05); left: 0; position: sticky; z-index: 2; } td.sticky { background: var(--lt-bg-default); box-shadow: 2px 0 4px rgba(0, 0, 0, 0.05); left: 0; position: sticky; z-index: 1; } :host([striped]) tbody tr:nth-child(even) td.sticky { background: var(--lt-bg-surface); } :host([hoverable]) tbody tr:hover td.sticky { background: var(--lt-bg-surface); } :host([striped][hoverable]) tbody tr:nth-child(even):hover td.sticky { background: var(--lt-bg-overlay); } /* Border styling */ :host([bordered]) table { border: var(--lt-border-width, 1px) solid var(--lt-border-default); } :host([bordered]) th, :host([bordered]) td { border-right: 1px solid var(--lt-border-default); } :host([bordered]) th:last-child, :host([bordered]) td:last-child { border-right: none; } /* Empty state */ .empty-state { color: var(--lt-text-subtle); padding: var(--lt-spacing-8); text-align: center; } /* Loading state */ .loading-overlay { align-items: center; background: rgba(255, 255, 255, 0.8); display: flex; height: 100%; justify-content: center; left: 0; position: absolute; top: 0; width: 100%; z-index: 10; } /* Stack mode for mobile */ @media (max-width: 768px) { :host([responsive-mode='stack']) .table-container { overflow-x: visible; } :host([responsive-mode='stack']) table, :host([responsive-mode='stack']) thead, :host([responsive-mode='stack']) tbody, :host([responsive-mode='stack']) th, :host([responsive-mode='stack']) td, :host([responsive-mode='stack']) tr { display: block; } :host([responsive-mode='stack']) thead { display: none; } :host([responsive-mode='stack']) tr { background: var(--lt-bg-subtle); border-radius: var(--lt-border-radius); border: var(--lt-border-width, 1px) solid var(--lt-border-default); margin-bottom: var(--lt-spacing-3); padding: var(--lt-spacing-4); } :host([responsive-mode='stack']) td { border: none; display: grid; gap: var(--lt-spacing-2); grid-template-columns: 120px 1fr; padding: var(--lt-spacing-2) 0; text-align: left; } :host([responsive-mode='stack']) td::before { content: attr(data-label); color: var(--lt-text-default); font-weight: 600; } :host([responsive-mode='stack']) td:last-child { padding-bottom: 0; } } @media (max-width: 768px) { .hide-on-mobile { display: none; } } th.sortable:focus-visible { outline: 2px solid var(--lt-interactive-primary-bg); outline-offset: -2px; } `"
|
|
8432
8498
|
}
|
|
8433
8499
|
],
|
|
8434
8500
|
"exports": [
|
|
@@ -8754,7 +8820,7 @@
|
|
|
8754
8820
|
{
|
|
8755
8821
|
"kind": "variable",
|
|
8756
8822
|
"name": "textStyles",
|
|
8757
|
-
"default": "css` :host { display: block; color: inherit; } /* Inline variants sit in text flow */ :host([variant='caption']), :host([variant='overline']), :host([variant='label']) { display: inline; } [part='base'] { margin: 0; color: inherit; font-family: var(--lt-typography-
|
|
8823
|
+
"default": "css` :host { display: block; color: inherit; } /* Inline variants sit in text flow */ :host([variant='caption']), :host([variant='overline']), :host([variant='label']) { display: inline; } [part='base'] { margin: 0; color: inherit; font-family: var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif); } /* ── Display ─────────────────────────────────────────────────────────── */ :host([variant='display-2xl']) [part='base'] { font-family: var( --lt-typography-fontFamilyHeading, var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif) ); font-size: clamp(2.5rem, 6vw, 4.5rem); font-weight: var(--lt-text-weight, 200); line-height: 1.1; letter-spacing: var(--lt-text-tracking, -0.02em); } :host([variant='display-xl']) [part='base'] { font-family: var( --lt-typography-fontFamilyHeading, var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif) ); font-size: clamp(2rem, 5vw, 3.75rem); font-weight: var(--lt-text-weight, 200); line-height: 1.1; letter-spacing: var(--lt-text-tracking, -0.02em); } :host([variant='display-lg']) [part='base'] { font-family: var( --lt-typography-fontFamilyHeading, var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif) ); font-size: clamp(2rem, 4vw, 3rem); font-weight: var(--lt-text-weight, 200); line-height: 1.15; letter-spacing: var(--lt-text-tracking, -0.01em); } /* ── Headings ─────────────────────────────────────────────────────────── */ :host([variant='h1']) [part='base'] { font-family: var( --lt-typography-fontFamilyHeading, var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif) ); font-size: clamp(1.75rem, 2.5vw + 0.75rem, 2.5rem); font-weight: var(--lt-text-weight, 600); line-height: 1.2; letter-spacing: var(--lt-text-tracking, -0.02em); } :host([variant='h2']) [part='base'] { font-family: var( --lt-typography-fontFamilyHeading, var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif) ); font-size: clamp(1.5rem, 2vw + 0.5rem, 2rem); font-weight: var(--lt-text-weight, 600); line-height: 1.25; letter-spacing: var(--lt-text-tracking, -0.01em); } :host([variant='h3']) [part='base'] { font-family: var( --lt-typography-fontFamilyHeading, var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif) ); font-size: clamp(1.25rem, 1.5vw + 0.5rem, 1.5rem); font-weight: var(--lt-text-weight, 600); line-height: 1.3; } :host([variant='h4']) [part='base'] { font-family: var( --lt-typography-fontFamilyHeading, var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif) ); font-size: 1.25rem; font-weight: var(--lt-text-weight, 600); line-height: 1.35; } :host([variant='h5']) [part='base'] { font-family: var( --lt-typography-fontFamilyHeading, var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif) ); font-size: 1.125rem; font-weight: var(--lt-text-weight, 600); line-height: 1.4; } :host([variant='h6']) [part='base'] { font-family: var( --lt-typography-fontFamilyHeading, var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif) ); font-size: 1rem; font-weight: var(--lt-text-weight, 600); line-height: 1.4; } /* ── Body ─────────────────────────────────────────────────────────────── */ :host([variant='lead']) [part='base'] { font-size: 1.25rem; font-weight: var(--lt-text-weight, 400); line-height: 1.6; } :host([variant='body']) [part='base'], :host(:not([variant])) [part='base'] { font-size: 1rem; font-weight: var(--lt-text-weight, 400); line-height: 1.6; } :host([variant='body-sm']) [part='base'] { font-size: 0.875rem; font-weight: var(--lt-text-weight, 400); line-height: 1.6; } /* ── Inline ───────────────────────────────────────────────────────────── */ :host([variant='caption']) [part='base'] { font-size: 0.75rem; font-weight: var(--lt-text-weight, 400); line-height: 1.5; } :host([variant='overline']) [part='base'] { font-size: 0.6875rem; font-weight: var(--lt-text-weight, 600); line-height: 1.2; letter-spacing: var(--lt-text-tracking, 0.08em); text-transform: uppercase; } :host([variant='label']) [part='base'] { font-size: 0.875rem; font-weight: var(--lt-text-weight, 600); line-height: 1.4; } `"
|
|
8758
8824
|
}
|
|
8759
8825
|
],
|
|
8760
8826
|
"exports": [
|
|
@@ -8780,6 +8846,10 @@
|
|
|
8780
8846
|
{
|
|
8781
8847
|
"description": "Overrides the default font-weight for the variant.",
|
|
8782
8848
|
"name": "--lt-text-weight"
|
|
8849
|
+
},
|
|
8850
|
+
{
|
|
8851
|
+
"description": "Overrides the default letter-spacing for the variant.",
|
|
8852
|
+
"name": "--lt-text-tracking"
|
|
8783
8853
|
}
|
|
8784
8854
|
],
|
|
8785
8855
|
"members": [
|
|
@@ -8885,7 +8955,7 @@
|
|
|
8885
8955
|
{
|
|
8886
8956
|
"kind": "variable",
|
|
8887
8957
|
"name": "textfieldStyles",
|
|
8888
|
-
"default": "css` :host { display: inline-block; font-family: var(--lt-typography-
|
|
8958
|
+
"default": "css` :host { display: inline-block; font-family: var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif); width: 100%; } .wrapper { display: flex; flex-direction: column; gap: var(--lt-spacing-1); width: 100%; } label { color: var(--lt-text-subtle); } .input-container { position: relative; width: 100%; display: flex; align-items: center; gap: var(--lt-spacing-2); } .icon-start, .icon-end { color: var(--lt-text-muted); flex-shrink: 0; position: absolute; pointer-events: none; } .icon-start { left: var(--lt-spacing-3); } .icon-end { right: var(--lt-spacing-3); } .password-toggle { pointer-events: auto; cursor: pointer; transition: color 120ms ease; } .password-toggle:hover { color: var(--lt-text-default); } .variant-icon { pointer-events: none; } :host([variant='success']) .variant-icon { color: var(--lt-interactive-success-bg); } :host([variant='warning']) .variant-icon { color: var(--lt-interactive-warning-bg); } :host([variant='error']) .variant-icon, :host([data-invalid]) .variant-icon { color: var(--lt-interactive-error-bg); } input, textarea { background: var(--lt-bg-subtle); border-radius: var(--lt-border-radius); border: var(--lt-border-width, 1px) solid var(--lt-border-default); box-sizing: border-box; color: var(--lt-text-default); font-family: inherit; font-weight: 400; transition: border-color 120ms ease, box-shadow 120ms ease; width: 100%; } textarea { min-height: 80px; padding-block: var(--lt-spacing-3); resize: vertical; } input::placeholder, textarea::placeholder { color: var(--lt-text-muted); } input:hover:not(:disabled), textarea:hover:not(:disabled) { border-color: var(--lt-border-strong); } input:focus, textarea:focus { border-color: var(--lt-interactive-primary-bg); box-shadow: 0 0 0 3px var(--lt-bg-primary-subtle); outline: none; } input:disabled, textarea:disabled { background: var(--lt-bg-surface); color: var(--lt-text-muted); cursor: not-allowed; } /* sizes */ :host([size='sm']) input, :host([size='sm']) textarea { font-size: 0.875rem; height: 32px; padding-inline: var(--lt-spacing-3); } :host([size='sm']) input.has-start-icon, :host([size='sm']) textarea.has-start-icon { padding-left: calc(var(--lt-spacing-3) + 20px + var(--lt-spacing-2)); } :host([size='sm']) input.has-end-icon, :host([size='sm']) textarea.has-end-icon { padding-right: calc(var(--lt-spacing-3) + 20px + var(--lt-spacing-2)); } :host([size='md']) input, :host([size='md']) textarea { font-size: 1rem; height: 40px; padding-inline: var(--lt-spacing-4); } :host([size='md']) input.has-start-icon, :host([size='md']) textarea.has-start-icon { padding-left: calc(var(--lt-spacing-4) + 20px + var(--lt-spacing-2)); } :host([size='md']) input.has-end-icon, :host([size='md']) textarea.has-end-icon { padding-right: calc(var(--lt-spacing-4) + 20px + var(--lt-spacing-2)); } :host([size='lg']) input, :host([size='lg']) textarea { font-size: 1.0625rem; height: 48px; padding-inline: var(--lt-spacing-5); } :host([size='lg']) input.has-start-icon, :host([size='lg']) textarea.has-start-icon { padding-left: calc(var(--lt-spacing-5) + 24px + var(--lt-spacing-2)); } :host([size='lg']) input.has-end-icon, :host([size='lg']) textarea.has-end-icon { padding-right: calc(var(--lt-spacing-5) + 24px + var(--lt-spacing-2)); } :host([size='lg']) .icon-start, :host([size='lg']) .icon-end { width: 24px; height: 24px; } /* variants */ :host([variant='success']) input, :host([variant='success']) textarea { border-color: var(--lt-border-success-strong); } :host([variant='success']) input:focus, :host([variant='success']) textarea:focus { border-color: var(--lt-interactive-success-bg-hover); box-shadow: 0 0 0 3px var(--lt-bg-success-subtle); } :host([variant='warning']) input, :host([variant='warning']) textarea { border-color: var(--lt-border-warning-strong); } :host([variant='warning']) input:focus, :host([variant='warning']) textarea:focus { border-color: var(--lt-interactive-warning-bg-hover); box-shadow: 0 0 0 3px var(--lt-bg-warning-subtle); } :host([variant='error']) input, :host([variant='error']) textarea, :host([data-invalid]) input, :host([data-invalid]) textarea { border-color: var(--lt-border-error-strong); } :host([variant='error']) input:focus, :host([variant='error']) textarea:focus, :host([data-invalid]) input:focus, :host([data-invalid]) textarea:focus { border-color: var(--lt-interactive-error-bg-hover); box-shadow: 0 0 0 3px var(--lt-bg-error-subtle); } .helper-text { color: var(--lt-text-subtle); } .helper-text::part(base) { font-weight: 200; } :host([variant='success']) .helper-text { color: var(--lt-text-success); } :host([variant='warning']) .helper-text { color: var(--lt-text-warning); } :host([variant='error']) .helper-text, :host([data-invalid]) .helper-text { color: var(--lt-text-error); } .required-indicator { color: var(--lt-color-error-500); } :host([uppercase]) label lt-text::part(base) { font-variant-caps: small-caps; letter-spacing: 0.05rem; text-transform: lowercase; } `"
|
|
8889
8959
|
}
|
|
8890
8960
|
],
|
|
8891
8961
|
"exports": [
|