@latty-ds/web 0.10.3 → 0.10.4
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 +4 -4
- package/dist/components/alert/index.js +3 -3
- package/dist/components/badge/index.js +1 -1
- package/dist/components/button/index.js +3 -3
- package/dist/components/calendar/index.js +2 -2
- package/dist/components/date-input/index.js +2 -2
- package/dist/components/dialog/index.js +3 -3
- package/dist/components/dropdown/dropdown-item.d.ts +1 -1
- package/dist/components/icon-button/index.js +3 -3
- package/dist/components/sidepanel/index.js +3 -3
- package/dist/index.cjs +9 -9
- package/dist/index.js +9 -9
- package/package.json +4 -4
package/custom-elements.json
CHANGED
|
@@ -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-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-
|
|
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-interactive-neutral-bg); border-color: transparent; color: var(--lt-color-white); } /* ── Dot color inherits text color ───────────────────────────────── */ .dot { background: currentColor; } `"
|
|
602
602
|
}
|
|
603
603
|
],
|
|
604
604
|
"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-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-
|
|
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-interactive-neutral-bg); --_color: var(--lt-color-neutral-50); --_hover-bg: var(--lt-interactive-neutral-bg-hover); --_active-bg: var(--lt-interactive-neutral-bg-active); } :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": [
|
|
@@ -1199,7 +1199,7 @@
|
|
|
1199
1199
|
{
|
|
1200
1200
|
"kind": "variable",
|
|
1201
1201
|
"name": "calendarStyles",
|
|
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);
|
|
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 — dimmed by the muted text color alone. They're enabled, clickable buttons, and a 0.5 opacity on top of muted text took them to ~2:1 (WCAG AA needs 4.5:1). */ .day--outside { color: var(--lt-text-muted); } /* 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; } `"
|
|
1203
1203
|
}
|
|
1204
1204
|
],
|
|
1205
1205
|
"exports": [
|
|
@@ -4238,7 +4238,7 @@
|
|
|
4238
4238
|
{
|
|
4239
4239
|
"kind": "variable",
|
|
4240
4240
|
"name": "iconButtonStyles",
|
|
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; } /* 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-
|
|
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; } /* 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-interactive-neutral-bg); --_color: var(--lt-color-neutral-50); --_hover-bg: var(--lt-interactive-neutral-bg-hover); --_hover-color: var(--lt-color-neutral-50); --_active-bg: var(--lt-interactive-neutral-bg-active); } :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%; } `"
|
|
4242
4242
|
}
|
|
4243
4243
|
],
|
|
4244
4244
|
"exports": [
|
|
@@ -321,11 +321,11 @@ var iconButtonStyles = css2`
|
|
|
321
321
|
--_active-bg: var(--lt-interactive-secondary-bg-active);
|
|
322
322
|
}
|
|
323
323
|
:host([appearance='filled'][variant='neutral']) {
|
|
324
|
-
--_bg: var(--lt-
|
|
324
|
+
--_bg: var(--lt-interactive-neutral-bg);
|
|
325
325
|
--_color: var(--lt-color-neutral-50);
|
|
326
|
-
--_hover-bg: var(--lt-
|
|
326
|
+
--_hover-bg: var(--lt-interactive-neutral-bg-hover);
|
|
327
327
|
--_hover-color: var(--lt-color-neutral-50);
|
|
328
|
-
--_active-bg: var(--lt-
|
|
328
|
+
--_active-bg: var(--lt-interactive-neutral-bg-active);
|
|
329
329
|
}
|
|
330
330
|
:host([appearance='filled'][variant='success']) {
|
|
331
331
|
--_bg: var(--lt-interactive-success-bg);
|
|
@@ -230,7 +230,7 @@ var badgeStyles = css`
|
|
|
230
230
|
}
|
|
231
231
|
|
|
232
232
|
:host([appearance='solid'][variant='neutral']) span[part='base'] {
|
|
233
|
-
background: var(--lt-
|
|
233
|
+
background: var(--lt-interactive-neutral-bg);
|
|
234
234
|
border-color: transparent;
|
|
235
235
|
color: var(--lt-color-white);
|
|
236
236
|
}
|
|
@@ -139,10 +139,10 @@ var buttonStyles = css`
|
|
|
139
139
|
--_active-bg: var(--lt-interactive-secondary-bg-active);
|
|
140
140
|
}
|
|
141
141
|
:host([variant='neutral']) {
|
|
142
|
-
--_bg: var(--lt-
|
|
142
|
+
--_bg: var(--lt-interactive-neutral-bg);
|
|
143
143
|
--_color: var(--lt-color-neutral-50);
|
|
144
|
-
--_hover-bg: var(--lt-
|
|
145
|
-
--_active-bg: var(--lt-
|
|
144
|
+
--_hover-bg: var(--lt-interactive-neutral-bg-hover);
|
|
145
|
+
--_active-bg: var(--lt-interactive-neutral-bg-active);
|
|
146
146
|
}
|
|
147
147
|
:host([variant='success']) {
|
|
148
148
|
--_bg: var(--lt-interactive-success-bg);
|
|
@@ -234,10 +234,10 @@ var calendarStyles = css`
|
|
|
234
234
|
background: var(--lt-interactive-primary-bg-hover);
|
|
235
235
|
}
|
|
236
236
|
|
|
237
|
-
/* Outside days
|
|
237
|
+
/* Outside days — dimmed by the muted text color alone. They're enabled, clickable buttons, and a 0.5
|
|
238
|
+
opacity on top of muted text took them to ~2:1 (WCAG AA needs 4.5:1). */
|
|
238
239
|
.day--outside {
|
|
239
240
|
color: var(--lt-text-muted);
|
|
240
|
-
opacity: 0.5;
|
|
241
241
|
}
|
|
242
242
|
|
|
243
243
|
/* Empty filler cell */
|
|
@@ -239,10 +239,10 @@ var calendarStyles = css`
|
|
|
239
239
|
background: var(--lt-interactive-primary-bg-hover);
|
|
240
240
|
}
|
|
241
241
|
|
|
242
|
-
/* Outside days
|
|
242
|
+
/* Outside days — dimmed by the muted text color alone. They're enabled, clickable buttons, and a 0.5
|
|
243
|
+
opacity on top of muted text took them to ~2:1 (WCAG AA needs 4.5:1). */
|
|
243
244
|
.day--outside {
|
|
244
245
|
color: var(--lt-text-muted);
|
|
245
|
-
opacity: 0.5;
|
|
246
246
|
}
|
|
247
247
|
|
|
248
248
|
/* Empty filler cell */
|
|
@@ -313,11 +313,11 @@ var iconButtonStyles = css3`
|
|
|
313
313
|
--_active-bg: var(--lt-interactive-secondary-bg-active);
|
|
314
314
|
}
|
|
315
315
|
:host([appearance='filled'][variant='neutral']) {
|
|
316
|
-
--_bg: var(--lt-
|
|
316
|
+
--_bg: var(--lt-interactive-neutral-bg);
|
|
317
317
|
--_color: var(--lt-color-neutral-50);
|
|
318
|
-
--_hover-bg: var(--lt-
|
|
318
|
+
--_hover-bg: var(--lt-interactive-neutral-bg-hover);
|
|
319
319
|
--_hover-color: var(--lt-color-neutral-50);
|
|
320
|
-
--_active-bg: var(--lt-
|
|
320
|
+
--_active-bg: var(--lt-interactive-neutral-bg-active);
|
|
321
321
|
}
|
|
322
322
|
:host([appearance='filled'][variant='success']) {
|
|
323
323
|
--_bg: var(--lt-interactive-success-bg);
|
|
@@ -11,7 +11,7 @@ export declare class DropdownItem extends ThemeableElement {
|
|
|
11
11
|
static shadowRootOptions: {
|
|
12
12
|
delegatesFocus: boolean;
|
|
13
13
|
clonable?: boolean;
|
|
14
|
-
customElementRegistry?: CustomElementRegistry;
|
|
14
|
+
customElementRegistry?: CustomElementRegistry | null;
|
|
15
15
|
mode: ShadowRootMode;
|
|
16
16
|
serializable?: boolean;
|
|
17
17
|
slotAssignment?: SlotAssignmentMode;
|
|
@@ -168,11 +168,11 @@ var iconButtonStyles = css`
|
|
|
168
168
|
--_active-bg: var(--lt-interactive-secondary-bg-active);
|
|
169
169
|
}
|
|
170
170
|
:host([appearance='filled'][variant='neutral']) {
|
|
171
|
-
--_bg: var(--lt-
|
|
171
|
+
--_bg: var(--lt-interactive-neutral-bg);
|
|
172
172
|
--_color: var(--lt-color-neutral-50);
|
|
173
|
-
--_hover-bg: var(--lt-
|
|
173
|
+
--_hover-bg: var(--lt-interactive-neutral-bg-hover);
|
|
174
174
|
--_hover-color: var(--lt-color-neutral-50);
|
|
175
|
-
--_active-bg: var(--lt-
|
|
175
|
+
--_active-bg: var(--lt-interactive-neutral-bg-active);
|
|
176
176
|
}
|
|
177
177
|
:host([appearance='filled'][variant='success']) {
|
|
178
178
|
--_bg: var(--lt-interactive-success-bg);
|
|
@@ -300,11 +300,11 @@ var iconButtonStyles = css3`
|
|
|
300
300
|
--_active-bg: var(--lt-interactive-secondary-bg-active);
|
|
301
301
|
}
|
|
302
302
|
:host([appearance='filled'][variant='neutral']) {
|
|
303
|
-
--_bg: var(--lt-
|
|
303
|
+
--_bg: var(--lt-interactive-neutral-bg);
|
|
304
304
|
--_color: var(--lt-color-neutral-50);
|
|
305
|
-
--_hover-bg: var(--lt-
|
|
305
|
+
--_hover-bg: var(--lt-interactive-neutral-bg-hover);
|
|
306
306
|
--_hover-color: var(--lt-color-neutral-50);
|
|
307
|
-
--_active-bg: var(--lt-
|
|
307
|
+
--_active-bg: var(--lt-interactive-neutral-bg-active);
|
|
308
308
|
}
|
|
309
309
|
:host([appearance='filled'][variant='success']) {
|
|
310
310
|
--_bg: var(--lt-interactive-success-bg);
|
package/dist/index.cjs
CHANGED
|
@@ -1913,10 +1913,10 @@ var buttonStyles = i`
|
|
|
1913
1913
|
--_active-bg: var(--lt-interactive-secondary-bg-active);
|
|
1914
1914
|
}
|
|
1915
1915
|
:host([variant='neutral']) {
|
|
1916
|
-
--_bg: var(--lt-
|
|
1916
|
+
--_bg: var(--lt-interactive-neutral-bg);
|
|
1917
1917
|
--_color: var(--lt-color-neutral-50);
|
|
1918
|
-
--_hover-bg: var(--lt-
|
|
1919
|
-
--_active-bg: var(--lt-
|
|
1918
|
+
--_hover-bg: var(--lt-interactive-neutral-bg-hover);
|
|
1919
|
+
--_active-bg: var(--lt-interactive-neutral-bg-active);
|
|
1920
1920
|
}
|
|
1921
1921
|
:host([variant='success']) {
|
|
1922
1922
|
--_bg: var(--lt-interactive-success-bg);
|
|
@@ -3201,11 +3201,11 @@ var iconButtonStyles = i`
|
|
|
3201
3201
|
--_active-bg: var(--lt-interactive-secondary-bg-active);
|
|
3202
3202
|
}
|
|
3203
3203
|
:host([appearance='filled'][variant='neutral']) {
|
|
3204
|
-
--_bg: var(--lt-
|
|
3204
|
+
--_bg: var(--lt-interactive-neutral-bg);
|
|
3205
3205
|
--_color: var(--lt-color-neutral-50);
|
|
3206
|
-
--_hover-bg: var(--lt-
|
|
3206
|
+
--_hover-bg: var(--lt-interactive-neutral-bg-hover);
|
|
3207
3207
|
--_hover-color: var(--lt-color-neutral-50);
|
|
3208
|
-
--_active-bg: var(--lt-
|
|
3208
|
+
--_active-bg: var(--lt-interactive-neutral-bg-active);
|
|
3209
3209
|
}
|
|
3210
3210
|
:host([appearance='filled'][variant='success']) {
|
|
3211
3211
|
--_bg: var(--lt-interactive-success-bg);
|
|
@@ -8408,7 +8408,7 @@ var badgeStyles = i`
|
|
|
8408
8408
|
}
|
|
8409
8409
|
|
|
8410
8410
|
:host([appearance='solid'][variant='neutral']) span[part='base'] {
|
|
8411
|
-
background: var(--lt-
|
|
8411
|
+
background: var(--lt-interactive-neutral-bg);
|
|
8412
8412
|
border-color: transparent;
|
|
8413
8413
|
color: var(--lt-color-white);
|
|
8414
8414
|
}
|
|
@@ -11387,10 +11387,10 @@ var calendarStyles = i`
|
|
|
11387
11387
|
background: var(--lt-interactive-primary-bg-hover);
|
|
11388
11388
|
}
|
|
11389
11389
|
|
|
11390
|
-
/* Outside days
|
|
11390
|
+
/* Outside days — dimmed by the muted text color alone. They're enabled, clickable buttons, and a 0.5
|
|
11391
|
+
opacity on top of muted text took them to ~2:1 (WCAG AA needs 4.5:1). */
|
|
11391
11392
|
.day--outside {
|
|
11392
11393
|
color: var(--lt-text-muted);
|
|
11393
|
-
opacity: 0.5;
|
|
11394
11394
|
}
|
|
11395
11395
|
|
|
11396
11396
|
/* Empty filler cell */
|
package/dist/index.js
CHANGED
|
@@ -604,10 +604,10 @@ var buttonStyles = css3`
|
|
|
604
604
|
--_active-bg: var(--lt-interactive-secondary-bg-active);
|
|
605
605
|
}
|
|
606
606
|
:host([variant='neutral']) {
|
|
607
|
-
--_bg: var(--lt-
|
|
607
|
+
--_bg: var(--lt-interactive-neutral-bg);
|
|
608
608
|
--_color: var(--lt-color-neutral-50);
|
|
609
|
-
--_hover-bg: var(--lt-
|
|
610
|
-
--_active-bg: var(--lt-
|
|
609
|
+
--_hover-bg: var(--lt-interactive-neutral-bg-hover);
|
|
610
|
+
--_active-bg: var(--lt-interactive-neutral-bg-active);
|
|
611
611
|
}
|
|
612
612
|
:host([variant='success']) {
|
|
613
613
|
--_bg: var(--lt-interactive-success-bg);
|
|
@@ -1871,11 +1871,11 @@ var iconButtonStyles = css9`
|
|
|
1871
1871
|
--_active-bg: var(--lt-interactive-secondary-bg-active);
|
|
1872
1872
|
}
|
|
1873
1873
|
:host([appearance='filled'][variant='neutral']) {
|
|
1874
|
-
--_bg: var(--lt-
|
|
1874
|
+
--_bg: var(--lt-interactive-neutral-bg);
|
|
1875
1875
|
--_color: var(--lt-color-neutral-50);
|
|
1876
|
-
--_hover-bg: var(--lt-
|
|
1876
|
+
--_hover-bg: var(--lt-interactive-neutral-bg-hover);
|
|
1877
1877
|
--_hover-color: var(--lt-color-neutral-50);
|
|
1878
|
-
--_active-bg: var(--lt-
|
|
1878
|
+
--_active-bg: var(--lt-interactive-neutral-bg-active);
|
|
1879
1879
|
}
|
|
1880
1880
|
:host([appearance='filled'][variant='success']) {
|
|
1881
1881
|
--_bg: var(--lt-interactive-success-bg);
|
|
@@ -7048,7 +7048,7 @@ var badgeStyles = css24`
|
|
|
7048
7048
|
}
|
|
7049
7049
|
|
|
7050
7050
|
:host([appearance='solid'][variant='neutral']) span[part='base'] {
|
|
7051
|
-
background: var(--lt-
|
|
7051
|
+
background: var(--lt-interactive-neutral-bg);
|
|
7052
7052
|
border-color: transparent;
|
|
7053
7053
|
color: var(--lt-color-white);
|
|
7054
7054
|
}
|
|
@@ -10121,10 +10121,10 @@ var calendarStyles = css42`
|
|
|
10121
10121
|
background: var(--lt-interactive-primary-bg-hover);
|
|
10122
10122
|
}
|
|
10123
10123
|
|
|
10124
|
-
/* Outside days
|
|
10124
|
+
/* Outside days — dimmed by the muted text color alone. They're enabled, clickable buttons, and a 0.5
|
|
10125
|
+
opacity on top of muted text took them to ~2:1 (WCAG AA needs 4.5:1). */
|
|
10125
10126
|
.day--outside {
|
|
10126
10127
|
color: var(--lt-text-muted);
|
|
10127
|
-
opacity: 0.5;
|
|
10128
10128
|
}
|
|
10129
10129
|
|
|
10130
10130
|
/* Empty filler cell */
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@latty-ds/web",
|
|
3
|
-
"version": "0.10.
|
|
3
|
+
"version": "0.10.4",
|
|
4
4
|
"description": "Web Components for the Latty design system — framework-agnostic UI components built with Lit",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"repository": {
|
|
@@ -217,15 +217,15 @@
|
|
|
217
217
|
"@custom-elements-manifest/analyzer": "^0.11.0",
|
|
218
218
|
"lit": "^3.2.0",
|
|
219
219
|
"tsup": "^8.5.1",
|
|
220
|
-
"typescript": "^
|
|
220
|
+
"typescript": "^6.0.3"
|
|
221
221
|
},
|
|
222
222
|
"peerDependencies": {
|
|
223
223
|
"lit": "^3.2.0"
|
|
224
224
|
},
|
|
225
225
|
"dependencies": {
|
|
226
226
|
"@floating-ui/dom": "^1.7.6",
|
|
227
|
-
"@latty-ds/icons": "0.10.
|
|
227
|
+
"@latty-ds/icons": "0.10.4"
|
|
228
228
|
},
|
|
229
229
|
"customElements": "custom-elements.json",
|
|
230
|
-
"gitHead": "
|
|
230
|
+
"gitHead": "ce56485456ff6ef71d5c4606bdf484928ae30401"
|
|
231
231
|
}
|