@antadesign/anta 0.3.33 → 0.3.35
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/LICENSE.md +14 -1
- package/README.md +9 -0
- package/dist/anta_helpers.d.ts +46 -30
- package/dist/anta_helpers.js +66 -25
- package/dist/bundle.css +1 -1
- package/dist/bundle.js +2 -1353
- package/dist/components/Banner.d.ts +25 -40
- package/dist/components/Banner.js +15 -17
- package/dist/components/Breadcrumbs.d.ts +0 -1
- package/dist/components/Breadcrumbs.js +0 -1
- package/dist/components/Button.d.ts +2 -3
- package/dist/components/Button.js +1 -0
- package/dist/components/ButtonCopy.js +3 -2
- package/dist/components/Calendar.js +13 -13
- package/dist/components/Card.d.ts +9 -17
- package/dist/components/Card.js +50 -46
- package/dist/components/Dialog.d.ts +1 -0
- package/dist/components/Dialog.js +16 -10
- package/dist/components/Expander.d.ts +6 -21
- package/dist/components/Expander.js +24 -23
- package/dist/components/Icon.d.ts +8 -14
- package/dist/components/Input.d.ts +77 -96
- package/dist/components/Input.js +23 -27
- package/dist/components/InputAutocomplete.d.ts +29 -10
- package/dist/components/InputAutocomplete.js +25 -8
- package/dist/components/InputDate.d.ts +0 -1
- package/dist/components/InputDate.js +2 -3
- package/dist/components/InputTime.d.ts +10 -4
- package/dist/components/InputTime.js +20 -16
- package/dist/components/Loader.d.ts +2 -2
- package/dist/components/Menu.d.ts +5 -4
- package/dist/components/Menu.js +13 -8
- package/dist/components/MenuItem.js +1 -14
- package/dist/components/MenuItemCopy.js +2 -2
- package/dist/components/Panel.d.ts +3 -1
- package/dist/components/Panel.js +17 -11
- package/dist/components/Progress.d.ts +21 -23
- package/dist/components/Progress.js +13 -9
- package/dist/components/RadioGroup.js +6 -8
- package/dist/components/{select-parts.css → Select.css} +1 -1
- package/dist/components/Select.d.ts +53 -36
- package/dist/components/Select.js +53 -98
- package/dist/components/SelectFaceted.d.ts +7 -4
- package/dist/components/SelectFaceted.js +21 -10
- package/dist/components/Slider.d.ts +28 -11
- package/dist/components/Slider.js +20 -20
- package/dist/components/Steps.css +1 -1
- package/dist/components/Steps.d.ts +0 -1
- package/dist/components/Steps.js +1 -12
- package/dist/components/Tabs.d.ts +17 -20
- package/dist/components/Tabs.js +7 -9
- package/dist/components/Text.d.ts +55 -36
- package/dist/components/Text.js +35 -22
- package/dist/components/Title.d.ts +19 -27
- package/dist/components/Title.js +2 -1
- package/dist/components/Toaster.js +9 -2
- package/dist/components/Tooltip.d.ts +10 -15
- package/dist/components/copy-props.d.ts +14 -3
- package/dist/components/copy-props.js +14 -3
- package/dist/components/select-tree.d.ts +24 -0
- package/dist/components/select-tree.js +35 -0
- package/dist/element-base.d.ts +10 -0
- package/dist/element-base.js +15 -0
- package/dist/elements/a-avatar.css +1 -1
- package/dist/elements/a-avatar.js +2 -28
- package/dist/elements/a-banner.css +1 -1
- package/dist/elements/a-banner.d.ts +4 -1
- package/dist/elements/a-banner.js +22 -112
- package/dist/elements/a-breadcrumbs.d.ts +1 -0
- package/dist/elements/a-breadcrumbs.js +1 -0
- package/dist/elements/a-button.css +1 -1
- package/dist/elements/a-button.d.ts +10 -7
- package/dist/elements/a-button.js +18 -1
- package/dist/elements/a-calendar.d.ts +14 -13
- package/dist/elements/a-calendar.js +29 -24
- package/dist/elements/a-card.css +1 -1
- package/dist/elements/a-card.d.ts +0 -9
- package/dist/elements/a-card.js +0 -184
- package/dist/elements/a-checkbox.css +1 -1
- package/dist/elements/a-copy.css +1 -1
- package/dist/elements/a-copy.d.ts +1 -5
- package/dist/elements/a-copy.js +129 -108
- package/dist/elements/a-dialog.css +1 -1
- package/dist/elements/a-dialog.d.ts +1 -1
- package/dist/elements/a-dialog.js +68 -194
- package/dist/elements/a-expander.css +1 -1
- package/dist/elements/a-expander.d.ts +4 -30
- package/dist/elements/a-expander.js +85 -344
- package/dist/elements/a-icon.d.ts +5 -23
- package/dist/elements/a-icon.js +1 -2
- package/dist/elements/a-input-date.d.ts +1 -0
- package/dist/elements/a-input-date.js +1 -0
- package/dist/elements/a-input-time.css +1 -1
- package/dist/elements/a-input-time.d.ts +2 -1
- package/dist/elements/a-input-time.js +101 -168
- package/dist/elements/a-input.css +1 -1
- package/dist/elements/a-input.d.ts +10 -8
- package/dist/elements/a-input.js +155 -230
- package/dist/elements/a-loader.d.ts +5 -8
- package/dist/elements/a-loader.js +1 -2
- package/dist/elements/a-menu-item.css +1 -1
- package/dist/elements/a-menu-item.d.ts +5 -3
- package/dist/elements/a-menu-item.js +5 -1
- package/dist/elements/a-menu.css +1 -1
- package/dist/elements/a-menu.d.ts +5 -7
- package/dist/elements/a-menu.js +383 -299
- package/dist/elements/a-panel.css +1 -1
- package/dist/elements/a-panel.js +19 -37
- package/dist/elements/a-progress.css +1 -1
- package/dist/elements/a-progress.d.ts +0 -22
- package/dist/elements/a-progress.js +0 -100
- package/dist/elements/a-radio-group.d.ts +1 -1
- package/dist/elements/a-radio-group.js +6 -4
- package/dist/elements/a-select-faceted.d.ts +1 -0
- package/dist/elements/a-select-faceted.js +1 -0
- package/dist/elements/a-select.d.ts +1 -0
- package/dist/elements/a-select.js +1 -0
- package/dist/elements/a-slider.css +1 -1
- package/dist/elements/a-slider.d.ts +11 -3
- package/dist/elements/a-slider.js +244 -242
- package/dist/elements/a-steps.d.ts +1 -0
- package/dist/elements/a-steps.js +1 -0
- package/dist/elements/a-switch.css +1 -1
- package/dist/elements/a-tab.css +1 -1
- package/dist/elements/a-tabpanel.d.ts +2 -2
- package/dist/elements/a-tabpanel.js +13 -3
- package/dist/elements/a-tabs.css +1 -1
- package/dist/elements/a-tabs.d.ts +1 -1
- package/dist/elements/a-tabs.js +6 -4
- package/dist/elements/a-tag.css +1 -1
- package/dist/elements/a-tag.d.ts +1 -0
- package/dist/elements/a-tag.js +1 -0
- package/dist/elements/a-text.css +1 -1
- package/dist/elements/a-text.d.ts +6 -43
- package/dist/elements/a-text.js +110 -193
- package/dist/elements/a-title.css +1 -1
- package/dist/elements/a-title.d.ts +1 -0
- package/dist/elements/a-title.js +1 -0
- package/dist/elements/a-toast.css +1 -1
- package/dist/elements/a-toast.d.ts +10 -45
- package/dist/elements/a-toast.js +80 -66
- package/dist/elements/a-toaster.css +1 -1
- package/dist/elements/a-toaster.js +9 -44
- package/dist/elements/a-tooltip.css +1 -1
- package/dist/elements/a-tooltip.d.ts +1 -1
- package/dist/elements/a-tooltip.js +142 -136
- package/dist/elements/copy-behavior.d.ts +1 -1
- package/dist/elements/copy-behavior.js +21 -21
- package/dist/elements/index.d.ts +9 -3
- package/dist/elements/index.js +6 -6
- package/dist/elements/input-focus-modality.d.ts +15 -0
- package/dist/elements/input-focus-modality.js +44 -0
- package/dist/elements/input-trailing-actions.d.ts +5 -0
- package/dist/elements/input-trailing-actions.js +38 -0
- package/dist/elements/shadow-aria.d.ts +2 -0
- package/dist/elements/shadow-aria.js +2 -1
- package/dist/elements/value-input.d.ts +3 -0
- package/dist/elements/value-input.js +12 -0
- package/dist/general_types.d.ts +103 -96
- package/dist/index.d.ts +1 -1
- package/dist/input-events.d.ts +4 -0
- package/dist/input-events.js +15 -0
- package/dist/jsx-runtime.d.ts +70 -23
- package/dist/jsx-runtime.js +26 -19
- package/dist/native-event-props.d.ts +2 -0
- package/dist/native-event-props.js +10 -0
- package/dist/reset.css +1 -1
- package/dist/theme-antithesis.css +10 -1
- package/dist/theme-antune.css +1 -1
- package/docs/accessibility.md +17 -3
- package/docs/changelog.md +384 -2
- package/docs/comparison.md +2 -2
- package/docs/components/avatar.md +5 -0
- package/docs/components/banner.md +117 -187
- package/docs/components/breadcrumbs.md +9 -6
- package/docs/components/button.md +22 -0
- package/docs/components/card.md +74 -28
- package/docs/components/checkbox.md +9 -10
- package/docs/components/dialog.md +83 -32
- package/docs/components/expander.md +198 -435
- package/docs/components/icon.md +11 -17
- package/docs/components/input-autocomplete.md +152 -52
- package/docs/components/input-date.md +175 -148
- package/docs/components/input-time.md +81 -38
- package/docs/components/input.md +343 -349
- package/docs/components/loader.md +2 -1
- package/docs/components/menu.md +35 -6
- package/docs/components/panel.md +18 -0
- package/docs/components/progress.md +83 -49
- package/docs/components/radio.md +39 -43
- package/docs/components/select-faceted.md +54 -7
- package/docs/components/select.md +390 -386
- package/docs/components/slider.md +136 -19
- package/docs/components/steps.md +6 -3
- package/docs/components/switch.md +8 -9
- package/docs/components/tabs.md +110 -104
- package/docs/components/text.md +110 -86
- package/docs/components/title.md +47 -33
- package/docs/components/toaster.md +242 -84
- package/docs/components/tooltip.md +204 -113
- package/docs/install-config.md +461 -96
- package/docs/packages/plot.md +228 -143
- package/docs/theming.md +29 -13
- package/package.json +43 -4
- package/theme-antithesis-license.md +66 -0
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import '../components/Steps.css';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import "../components/Steps.css";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer base,anta,components,utilities;@layer anta.reset,anta.components,anta.theme;@layer anta.components{a-switch{--switch-gap: 8px;--switch-track-inline-size: 30px;--switch-track-block-size: 18px;--switch-thumb-size: 12px;--switch-thumb-size-off: 10px;--switch-thumb-inset: 2px;--switch-thumb-inset-off: 4px;--switch-thumb-travel: 13px;--switch-track-round: 999px;--switch-thumb-round: 999px;--switch-label-fs: 15px;--switch-label-lh: 20px;--switch-track-off-stroke-neutral: var(--border-3);--switch-track-off-stroke: var(--switch-track-off-stroke-neutral);--switch-track-off-stroke-hover: var(--border-2);--switch-track-off-stroke-active: var(--border-1);--switch-track-disabled: light-dark( color-mix(in oklch, #44374b 10%, transparent), color-mix(in oklch, #e4d1ef 10%, transparent) );--switch-thumb: light-dark(var(--bg-1), #ece9ec);--switch-thumb-off: var(--switch-track-off-stroke);--switch-tone-source: var(--anta-seed-neutral);--switch-off-tone-source: var(--anta-seed-neutral);--switch-track-on: light-dark( oklch(from var(--switch-tone-source) .56 c h), oklch(from var(--switch-tone-source) .47 c h) );--switch-track-on-hover: light-dark( oklch(from var(--switch-tone-source) .48 c h), oklch(from var(--switch-tone-source) .53 c h) );--switch-track-on-active: light-dark( oklch(from var(--switch-tone-source) .42 c h), oklch(from var(--switch-tone-source) .58 c h) );--switch-label-color: var(--text-2);--switch-label-color-disabled: var(--text-4);--switch-hint-color: var(--text-3);--switch-hint-fs: 13px;--switch-hint-lh: 16px;display:inline-grid;grid-template-columns:auto minmax(0,1fr);align-items:start;column-gap:var(--switch-gap);min-inline-size:0;vertical-align:middle;cursor:pointer;user-select:none;-webkit-user-drag:none;outline:none;color:var(--switch-label-color);font-family:var(--sans-serif);font-size:var(--switch-label-fs);line-height:var(--switch-label-lh);&:before,&:after{grid-column:1;grid-row:1 / -1;align-self:start;box-sizing:border-box;content:"";position:relative}&:before{z-index:0;box-sizing:border-box;inline-size:var(--switch-track-inline-size);block-size:var(--switch-track-block-size);margin-block-start:calc((var(--switch-label-lh) - var(--switch-track-block-size)) / 2);border-radius:var(--switch-track-round);background:transparent;border:1.5px solid var(--switch-track-off-stroke);transition:background-color .15s ease-out,border-color .15s ease-out}&:after{z-index:2;justify-self:start;inline-size:var(--switch-thumb-size-off);block-size:var(--switch-thumb-size-off);margin-inline-start:var(--switch-thumb-inset-off);margin-block-start:calc((var(--switch-label-lh) - var(--switch-thumb-size-off)) / 2);border-radius:var(--switch-thumb-round);background:var(--switch-thumb-off);box-shadow:none;transition:transform .15s ease-out,inline-size .15s ease-out,block-size .15s ease-out,margin-inline-start .15s ease-out,margin-block-start .15s ease-out,background-color .15s ease-out,box-shadow .15s ease-out}&[label-position=start]{grid-template-columns:minmax(0,1fr) auto;&:before,&:after{grid-column:2}a-switch-label,a-switch-hint{grid-column:1}}&[round]{--switch-track-round: var(--switch-round, 999px);--switch-thumb-round: max(0px, calc(var(--switch-track-round) - 3px));@supports (border-radius: attr(probe type(<length>),1px)){--switch-track-round: var(--switch-round, attr(round type(<length>), 999px))}}&:state(checked){&:before{background:var(--switch-track-on);border-color:transparent}&:after{inline-size:var(--switch-thumb-size);block-size:var(--switch-thumb-size);margin-inline-start:var(--switch-thumb-inset);margin-block-start:calc((var(--switch-label-lh) - var(--switch-thumb-size)) / 2);transform:translate(var(--switch-thumb-travel));background:var(--switch-thumb);box-shadow:
|
|
1
|
+
@layer base,anta,components,utilities;@layer anta.reset,anta.components,anta.theme;@layer anta.components{a-switch{--switch-gap: 8px;--switch-track-inline-size: 30px;--switch-track-block-size: 18px;--switch-thumb-size: 12px;--switch-thumb-size-off: 10px;--switch-thumb-inset: 2px;--switch-thumb-inset-off: 4px;--switch-thumb-travel: 13px;--switch-track-round: 999px;--switch-thumb-round: 999px;--switch-label-fs: 15px;--switch-label-lh: 20px;--switch-track-off-stroke-neutral: var(--border-3);--switch-track-off-stroke: var(--switch-track-off-stroke-neutral);--switch-track-off-stroke-hover: var(--border-2);--switch-track-off-stroke-active: var(--border-1);--switch-track-disabled: light-dark( color-mix(in oklch, #44374b 10%, transparent), color-mix(in oklch, #e4d1ef 10%, transparent) );--switch-track-disabled-border: var(--switch-track-disabled);--switch-track-on-disabled-border: transparent;--switch-thumb: light-dark(var(--bg-1), #ece9ec);--switch-thumb-off: var(--switch-track-off-stroke);--switch-thumb-off-disabled: var(--switch-thumb-off);--switch-thumb-shadow: 0 1px 2px color-mix(in oklch, #44374b 25%, transparent);--switch-thumb-shadow-disabled: 0 1px 2px color-mix(in oklch, #44374b 12.5%, transparent);--switch-tone-source: var(--anta-seed-neutral);--switch-off-tone-source: var(--anta-seed-neutral);--switch-track-on: light-dark( oklch(from var(--switch-tone-source) .56 c h), oklch(from var(--switch-tone-source) .47 c h) );--switch-track-on-hover: light-dark( oklch(from var(--switch-tone-source) .48 c h), oklch(from var(--switch-tone-source) .53 c h) );--switch-track-on-active: light-dark( oklch(from var(--switch-tone-source) .42 c h), oklch(from var(--switch-tone-source) .58 c h) );--switch-track-on-disabled: color-mix(in oklch, var(--switch-track-on) 50%, transparent);--switch-thumb-on-disabled: color-mix(in oklch, var(--switch-thumb) 50%, transparent);--switch-label-color: var(--text-2);--switch-label-color-disabled: var(--text-4);--switch-hint-color: var(--text-3);--switch-hint-fs: 13px;--switch-hint-lh: 16px;display:inline-grid;grid-template-columns:auto minmax(0,1fr);align-items:start;column-gap:var(--switch-gap);min-inline-size:0;vertical-align:middle;cursor:pointer;user-select:none;-webkit-user-drag:none;outline:none;color:var(--switch-label-color);font-family:var(--sans-serif);font-size:var(--switch-label-fs);line-height:var(--switch-label-lh);&:before,&:after{grid-column:1;grid-row:1 / -1;align-self:start;box-sizing:border-box;content:"";position:relative}&:before{z-index:0;box-sizing:border-box;inline-size:var(--switch-track-inline-size);block-size:var(--switch-track-block-size);margin-block-start:calc((var(--switch-label-lh) - var(--switch-track-block-size)) / 2);border-radius:var(--switch-track-round);background:transparent;border:1.5px solid var(--switch-track-off-stroke);transition:background-color .15s ease-out,border-color .15s ease-out}&:after{z-index:2;justify-self:start;inline-size:var(--switch-thumb-size-off);block-size:var(--switch-thumb-size-off);margin-inline-start:var(--switch-thumb-inset-off);margin-block-start:calc((var(--switch-label-lh) - var(--switch-thumb-size-off)) / 2);border-radius:var(--switch-thumb-round);background:var(--switch-thumb-off);box-shadow:none;transition:transform .15s ease-out,inline-size .15s ease-out,block-size .15s ease-out,margin-inline-start .15s ease-out,margin-block-start .15s ease-out,background-color .15s ease-out,box-shadow .15s ease-out}&[label-position=start]{grid-template-columns:minmax(0,1fr) auto;&:before,&:after{grid-column:2}a-switch-label,a-switch-hint{grid-column:1}}&[round]{--switch-track-round: var(--switch-round, 999px);--switch-thumb-round: max(0px, calc(var(--switch-track-round) - 3px));@supports (border-radius: attr(probe type(<length>),1px)){--switch-track-round: var(--switch-round, attr(round type(<length>), 999px))}}&:state(checked){&:before{background:var(--switch-track-on);border-color:transparent}&:after{inline-size:var(--switch-thumb-size);block-size:var(--switch-thumb-size);margin-inline-start:var(--switch-thumb-inset);margin-block-start:calc((var(--switch-label-lh) - var(--switch-thumb-size)) / 2);transform:translate(var(--switch-thumb-travel));background:var(--switch-thumb);box-shadow:var(--switch-thumb-shadow)}}@media(hover:hover)and (pointer:fine){&:not(:disabled):not(:state(checked)):hover:before{border-color:var(--switch-track-off-stroke-hover)}&:not(:disabled):hover:state(checked):before{background:var(--switch-track-on-hover)}}&:not(:disabled):not(:state(checked)):active:before{border-color:var(--switch-track-off-stroke-active)}&:not(:disabled):active:state(checked):before{background:var(--switch-track-on-active)}&:focus-visible{outline:none}&:focus-visible:before{outline:1px solid var(--focus-ring);outline-offset:1px}&:disabled{cursor:not-allowed;color:var(--switch-label-color-disabled);&:before{background:var(--switch-track-disabled);border-color:var(--switch-track-disabled-border);transition:none}&:after{background:var(--switch-thumb-off-disabled);box-shadow:none;transition:none}&:state(checked){&:before{background:var(--switch-track-on-disabled);border-color:var(--switch-track-on-disabled-border)}&:after{background:var(--switch-thumb-on-disabled);box-shadow:var(--switch-thumb-shadow-disabled)}}a-switch-hint{color:var(--switch-label-color-disabled)}}&[size=small]{--switch-gap: 6px;--switch-track-inline-size: 26px;--switch-track-block-size: 16px;--switch-thumb-size: 10px;--switch-thumb-size-off: 8px;--switch-thumb-inset-off: 4px;--switch-thumb-travel: 11px;--switch-label-fs: 13px;--switch-label-lh: 16px;--switch-hint-fs: 12px;--switch-hint-lh: 14px}&[size=large]{--switch-track-inline-size: 34px;--switch-track-block-size: 20px;--switch-thumb-size: 14px;--switch-thumb-size-off: 11px;--switch-thumb-inset-off: 5px;--switch-thumb-travel: 15px;--switch-label-fs: 17px;--switch-label-lh: 22px;--switch-hint-fs: 15px;--switch-hint-lh: 19px}}a-switch-label,a-switch-hint{display:block;grid-column:2;min-inline-size:0}a-switch-hint{color:var(--switch-hint-color);font-size:var(--switch-hint-fs);line-height:var(--switch-hint-lh);margin-block-start:2px}a-switch[tone=brand]{--switch-tone-source: var(--anta-seed-brand);--switch-off-tone-source: var(--anta-seed-brand)}a-switch[tone=neutral]{--switch-tone-source: var(--anta-seed-neutral);--switch-off-tone-source: var(--anta-seed-neutral)}a-switch[tone=info]{--switch-tone-source: var(--anta-seed-info);--switch-off-tone-source: var(--anta-seed-info)}a-switch[tone=success]{--switch-tone-source: var(--anta-seed-success);--switch-off-tone-source: var(--anta-seed-success)}a-switch[tone=warning]{--switch-tone-source: var(--anta-seed-warning);--switch-off-tone-source: var(--anta-seed-warning)}a-switch[tone=critical]{--switch-tone-source: var(--anta-seed-critical);--switch-off-tone-source: var(--anta-seed-critical)}a-switch[tone]:not([tone=""],[tone=neutral],[tone-scope=selected]){--_switch-off-track: light-dark( oklch(from var(--switch-off-tone-source) .56 c h), oklch(from var(--switch-off-tone-source) .47 c h) );--_switch-off-chrome: color-mix(in oklch, var(--_switch-off-track) 70%, var(--switch-track-off-stroke-neutral));--switch-track-off-stroke: light-dark( oklch(from var(--_switch-off-chrome) calc(l + .17) c h), var(--_switch-off-chrome) );--switch-track-off-stroke-hover: oklch(from var(--_switch-off-chrome) calc(l + .1) c h);--switch-track-off-stroke-active: light-dark( var(--_switch-off-chrome), oklch(from var(--_switch-off-chrome) calc(l + .17) c h) );--switch-thumb-off: var(--_switch-off-chrome)}a-switch[tone]:not([tone=""],[tone=brand],[tone=neutral],[tone=info],[tone=success],[tone=warning],[tone=critical]){--switch-tone-source: transparent;--switch-off-tone-source: transparent;@supports (color: attr(probe type(<color>),red)){--switch-tone-source: attr(tone type(<color>), transparent);--switch-off-tone-source: attr(tone type(<color>), transparent)}}@media(forced-colors:active){a-switch:before,a-switch:after{forced-color-adjust:none}a-switch:before{background-color:Canvas;border-color:CanvasText}a-switch:after{background-color:CanvasText;box-shadow:none}a-switch:state(checked):before{background-color:CanvasText;border-color:CanvasText}a-switch:state(checked):after{background-color:Canvas}a-switch:disabled:before{background-color:Canvas;border-color:GrayText}a-switch:disabled:after{background-color:GrayText}a-switch:disabled:state(checked):before{background-color:GrayText;border-color:GrayText}a-switch:disabled:state(checked):after{background-color:Canvas}}}
|
package/dist/elements/a-tab.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer base,anta,components,utilities;@layer anta.reset,anta.components,anta.theme;@layer anta.components{a-tab{user-select:none;display:inline-flex;align-items:center;justify-content:center;gap:.5ch;flex-shrink:1;min-width:0;cursor:pointer;color:var(--tab-fg, var(--text-3));background-color:var(--tab-bg, transparent);border:none;border-radius:var(--tab-radius);&[round]{--tab-radius: 999px}box-shadow:inset 0 0 0 0 transparent;font-size:var(--_fs);font-family:var(--sans-serif);font-weight:450;font-stretch:normal;line-height:var(--_lh);letter-spacing:.025ch;white-space:nowrap;text-wrap:nowrap;min-height:var(--tab-height);padding-block:calc((8px - var(--_pb)) / 2);padding-inline:var(--tab-padding-x);transition:background-color var(--tab-timing),box-shadow var(--tab-timing);>a-tab-label{display:inline-block;min-width:0;overflow:hidden;text-overflow:ellipsis;text-wrap:nowrap;white-space:nowrap;line-height:calc(var(--_lh) - 2px);padding-bottom:var(--_pb);&:has(>*){display:inline-flex;gap:.25ch}}>*{pointer-events:none}&:has(>a-icon:first-child):has(>a-tab-label){padding-inline-start:max(0px,var(--tab-padding-x) - 2px)}&:has(>a-icon:last-child):has(>a-tab-label){padding-inline-end:max(0px,var(--tab-padding-x) - 2px)}}a-tab:focus-visible{outline:1px solid var(--focus-ring);outline-offset:-1px}a-tab[disabled]{pointer-events:none;cursor:not-allowed;opacity:.45}}
|
|
1
|
+
@layer base,anta,components,utilities;@layer anta.reset,anta.components,anta.theme;@layer anta.components{a-tab{user-select:none;display:inline-flex;align-items:center;justify-content:center;gap:.5ch;flex-shrink:1;min-width:0;cursor:pointer;color:var(--tab-fg, var(--text-3));background-color:var(--tab-bg, transparent);border:none;border-radius:var(--tab-radius);&[round]{--tab-radius: var(--tabs-round, 999px)}box-shadow:inset 0 0 0 0 transparent;font-size:var(--_fs);font-family:var(--sans-serif);font-weight:450;font-stretch:normal;line-height:var(--_lh);letter-spacing:.025ch;white-space:nowrap;text-wrap:nowrap;min-height:var(--tab-height);padding-block:calc((8px - var(--_pb)) / 2);padding-inline:var(--tab-padding-x);transition:background-color var(--tab-timing),box-shadow var(--tab-timing);>a-tab-label{display:inline-block;min-width:0;overflow:hidden;text-overflow:ellipsis;text-wrap:nowrap;white-space:nowrap;line-height:calc(var(--_lh) - 2px);padding-bottom:var(--_pb);&:has(>*){display:inline-flex;gap:.25ch}}>*{pointer-events:none}&:has(>a-icon:first-child):has(>a-tab-label){padding-inline-start:max(0px,var(--tab-padding-x) - 2px)}&:has(>a-icon:last-child):has(>a-tab-label){padding-inline-end:max(0px,var(--tab-padding-x) - 2px)}}a-tab:focus-visible{outline:1px solid var(--focus-ring);outline-offset:-1px}a-tab[disabled]{pointer-events:none;cursor:not-allowed;opacity:.45}}
|
|
@@ -9,8 +9,8 @@ export declare class ATabPanelElement extends HTMLElementBase {
|
|
|
9
9
|
connectedCallback(): void;
|
|
10
10
|
disconnectedCallback(): void;
|
|
11
11
|
attributeChangedCallback(): void;
|
|
12
|
-
/** Locate the
|
|
13
|
-
*
|
|
12
|
+
/** Locate the nearest preceding <a-tabs> outside nested Tabs groups and subscribe
|
|
13
|
+
* to its `change`. */
|
|
14
14
|
private bindTabs;
|
|
15
15
|
private sync;
|
|
16
16
|
}
|
|
@@ -28,10 +28,20 @@ class ATabPanelElement extends HTMLElementBase {
|
|
|
28
28
|
attributeChangedCallback() {
|
|
29
29
|
this.sync();
|
|
30
30
|
}
|
|
31
|
-
/** Locate the
|
|
32
|
-
*
|
|
31
|
+
/** Locate the nearest preceding <a-tabs> outside nested Tabs groups and subscribe
|
|
32
|
+
* to its `change`. */
|
|
33
33
|
bindTabs() {
|
|
34
|
-
|
|
34
|
+
let sibling = this.previousElementSibling;
|
|
35
|
+
let nested = 0;
|
|
36
|
+
while (sibling) {
|
|
37
|
+
if (sibling.localName === "template" && sibling.hasAttribute("data-anta-tabs-end")) nested++;
|
|
38
|
+
else if (sibling.localName === "a-tabs") {
|
|
39
|
+
if (nested === 0) break;
|
|
40
|
+
nested--;
|
|
41
|
+
}
|
|
42
|
+
sibling = sibling.previousElementSibling;
|
|
43
|
+
}
|
|
44
|
+
const tabs = sibling;
|
|
35
45
|
if (tabs === this.tabs) return;
|
|
36
46
|
this.tabs?.removeEventListener("change", this.onTabsChange);
|
|
37
47
|
this.tabs = tabs;
|
package/dist/elements/a-tabs.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer base,anta,components,utilities;@layer anta.reset,anta.components,anta.theme;@layer anta.components{a-tabs{--_fs: 15px;--_lh: 20px;--_pb: 1px;--tab-padding-x: 9px;--tab-height: 28px;--tab-radius: 4px;--tabs-gap: 3px;--tab-timing: .15s ease-out;--tabs-tone-source: var(--anta-seed-neutral);--tab-fg-rest: var(--text-3);--tab-selected-text: var(--text-1);--tab-text-2: var(--text-2);--tabs-track-bg: light-dark( oklch(from var(--tabs-tone-source) .55 .008 h / .06), oklch(from var(--tabs-tone-source) .8 .008 h / .07) );--tabs-track-border: var(--border-4);--tabs-track-shadow: inset 0 0 0px .5px var(--tabs-track-border);--tab-selected-bg: var(--bg-1);--tab-selected-border: var(--border-2);--tab-selected-shadow: inset 0 0 0px .5px var(--tab-selected-border);--tab-secondary-bg: light-dark( oklch(from var(--tabs-tone-source) .55 .008 h / .03), oklch(from var(--tabs-tone-source) .8 .008 h / .08) );display:flex;flex-direction:row;align-items:stretch;gap:var(--tabs-gap);padding:0;width:fit-content;align-self:flex-start;min-width:0;max-width:100%;overflow:hidden;scroll-behavior:smooth}a-tabs[size=small]{--_fs: 13px;--_lh: 16px;--_pb: .5px;--tab-padding-x: 7px;--tab-height: 24px}a-tabs[size=large]{--_fs: 17px;--_lh: 24px;--_pb: 1.5px;--tab-padding-x: 13px;--tab-height: 32px}a-tabs a-tab :is(a-icon,a-loader){--icon-size: 16px}a-tabs[size=small] a-tab :is(a-icon,a-loader){--icon-size: 14px}a-tabs[size=large] a-tab :is(a-icon,a-loader){--icon-size: 18px}a-tabs[tone=brand],a-tab[tone=brand]{--tabs-tone-source: var(--anta-seed-brand);--tab-selected-text: var(--text-1-brand);--tab-text-2: var(--text-2-brand);--tab-rest-tone: var(--text-3-brand);--tabs-track-border: var(--border-4-brand);--tab-selected-border: var(--border-2-brand)}a-tabs[tone=info],a-tab[tone=info]{--tabs-tone-source: var(--anta-seed-info);--tab-selected-text: var(--text-1-info);--tab-text-2: var(--text-2-info);--tab-rest-tone: var(--text-3-info);--tabs-track-border: var(--border-4-info);--tab-selected-border: var(--border-2-info)}a-tabs[tone=success],a-tab[tone=success]{--tabs-tone-source: var(--anta-seed-success);--tab-selected-text: var(--text-1-success);--tab-text-2: var(--text-2-success);--tab-rest-tone: var(--text-3-success);--tabs-track-border: var(--border-4-success);--tab-selected-border: var(--border-2-success)}a-tabs[tone=warning],a-tab[tone=warning]{--tabs-tone-source: var(--anta-seed-warning);--tab-selected-text: var(--text-1-warning);--tab-text-2: var(--text-2-warning);--tab-rest-tone: var(--text-3-warning);--tabs-track-border: var(--border-4-warning);--tab-selected-border: var(--border-2-warning)}a-tabs[tone=critical],a-tab[tone=critical]{--tabs-tone-source: var(--anta-seed-critical);--tab-selected-text: var(--text-1-critical);--tab-text-2: var(--text-2-critical);--tab-rest-tone: var(--text-3-critical);--tabs-track-border: var(--border-4-critical);--tab-selected-border: var(--border-2-critical)}a-tab[tone=neutral]{--tabs-tone-source: var(--anta-seed-neutral);--tab-selected-text: var(--text-1);--tab-text-2: var(--text-2);--tab-rest-tone: var(--text-3);--tabs-track-border: var(--border-4);--tab-selected-border: var(--border-2)}a-tabs[tone]:not([tone=""],[tone=neutral]),a-tab[tone]:not([tone=""],[tone=neutral]){--tabs-track-bg: light-dark( oklch(from var(--tabs-tone-source) .55 .14 h / .06), oklch(from var(--tabs-tone-source) .8 .12 h / .07) );--tab-secondary-bg: light-dark( oklch(from var(--tabs-tone-source) .55 .14 h / .03), oklch(from var(--tabs-tone-source) .8 .12 h / .08) )}a-tabs:has(>a-tab[tone=brand]:state(selected)){--tabs-tone-source: var(--anta-seed-brand);--tab-selected-text: var(--text-1-brand);--tab-selected-border: var(--border-2-brand)}a-tabs:has(>a-tab[tone=info]:state(selected)){--tabs-tone-source: var(--anta-seed-info);--tab-selected-text: var(--text-1-info);--tab-selected-border: var(--border-2-info)}a-tabs:has(>a-tab[tone=success]:state(selected)){--tabs-tone-source: var(--anta-seed-success);--tab-selected-text: var(--text-1-success);--tab-selected-border: var(--border-2-success)}a-tabs:has(>a-tab[tone=warning]:state(selected)){--tabs-tone-source: var(--anta-seed-warning);--tab-selected-text: var(--text-1-warning);--tab-selected-border: var(--border-2-warning)}a-tabs:has(>a-tab[tone=critical]:state(selected)){--tabs-tone-source: var(--anta-seed-critical);--tab-selected-text: var(--text-1-critical);--tab-selected-border: var(--border-2-critical)}a-tabs:has(>a-tab[tone]:state(selected):not([tone=""],[tone=neutral])){--tabs-track-bg: light-dark( oklch(from var(--tabs-tone-source) .55 .14 h / .06), oklch(from var(--tabs-tone-source) .8 .12 h / .07) );--tab-secondary-bg: light-dark( oklch(from var(--tabs-tone-source) .55 .14 h / .03), oklch(from var(--tabs-tone-source) .8 .12 h / .08) )}a-tabs[tone]:not([tone=""],[tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical]),a-tab[tone]:not([tone=""],[tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical]){--tabs-tone-source: #635b65;--tab-selected-text: light-dark(oklch(from var(--tabs-tone-source) .38 .13 h), oklch(from var(--tabs-tone-source) .83 .1 h));--tab-text-2: light-dark(oklch(from var(--tabs-tone-source) .45 .13 h), oklch(from var(--tabs-tone-source) .76 .11 h));--tab-rest-tone: light-dark(oklch(from var(--tabs-tone-source) .45 .13 h / .8), oklch(from var(--tabs-tone-source) .76 .11 h / .8));--tabs-track-border: light-dark(oklch(from var(--tabs-tone-source) .9 .045 h), oklch(from var(--tabs-tone-source) .26 .055 h));--tab-selected-border: light-dark(oklch(from var(--tabs-tone-source) .8 .09 h), oklch(from var(--tabs-tone-source) .4 .11 h));@supports (color: attr(probe type(<color>),red)){--tabs-tone-source: attr(tone type(<color>), #635b65)}}a-tabs a-tab{--tab-fg: var(--tab-fg-rest);--tab-bg: transparent}a-tabs:not([orientation=vertical]) a-tab{flex:1 1 0;max-width:max-content}a-tabs[fill]{width:100%;align-self:stretch}a-tabs[fill]:not([orientation=vertical]) a-tab{flex:1 1 0;max-width:none}@media(hover:hover)and (pointer:fine){a-tabs a-tab:hover{--tab-fg: var(--tab-selected-text)}}a-tabs:not([priority=secondary],[priority=tertiary]){background:var(--tabs-track-bg);box-shadow:var(--tabs-track-shadow);border-radius:4px}a-tabs[round]{--tab-radius: 999px;--tabs-round: 999px;@supports (border-radius: attr(probe type(<length>),1px)){--tabs-round: attr(round type(<length>), 999px)}}a-tabs[round]:not([priority=secondary],[priority=tertiary]){border-radius:var(--tabs-round, 999px)}a-tabs:not([priority=secondary],[priority=tertiary]) a-tab:state(selected){--tab-fg: var(--tab-selected-text);--tab-bg: var(--tab-selected-bg);box-shadow:var(--tab-selected-shadow)}a-tabs[tone]:not([tone=""],[tone=neutral]),a-tab[tone]:not([tone=""],[tone=neutral]){--tab-fg-rest: var(--tab-rest-tone)}@media(hover:hover)and (pointer:fine){a-tabs[priority=secondary] a-tab:hover{--tab-fg: var(--tab-selected-text)}}a-tabs[priority=secondary] a-tab:state(selected){--tab-fg: var(--tab-selected-text);--tab-bg: var(--tab-secondary-bg);box-shadow:var(--tab-selected-shadow)}a-tabs[priority=tertiary] a-tab{--tab-underline-size: 1px;--tab-underline-color: transparent;position:relative;border-radius:0}a-tabs[priority=tertiary] a-tab:after{content:"";position:absolute;inset:0;box-sizing:border-box;pointer-events:none;border-bottom:var(--tab-underline-size) solid var(--tab-underline-color);transition:border-width var(--tab-timing),border-color var(--tab-timing)}a-tabs[orientation=vertical][priority=tertiary] a-tab:after{border-bottom:0;border-inline-end:var(--tab-underline-size) solid var(--tab-underline-color)}@media(hover:hover)and (pointer:fine){a-tabs[priority=tertiary] a-tab:hover{--tab-fg: var(--tab-text-2)}}a-tabs[priority=tertiary] a-tab:state(selected){--tab-fg: var(--tab-selected-text);--tab-underline-size: 1px;--tab-underline-color: var(--tab-selected-text)}a-tabs[orientation=vertical]{flex-direction:column;align-items:stretch;max-width:none;overflow-x:hidden;overflow-y:auto;flex-shrink:0}a-tabs[orientation=vertical] a-tab{justify-content:flex-start;flex-shrink:0}@supports (anchor-scope: all){a-tabs:not([noslide]){position:relative;anchor-scope:all}a-tabs:not([noslide]) a-tab{position:relative;z-index:1}a-tabs:not([noslide]) a-tab:state(selected){anchor-name:--tabs-active}a-tabs:not([noslide]):before{content:"";position:absolute;z-index:0;box-sizing:border-box;position-anchor:--tabs-active;top:anchor(top);right:anchor(right);bottom:anchor(bottom);left:anchor(left);transition:top var(--tab-timing),right var(--tab-timing),bottom var(--tab-timing),left var(--tab-timing)}a-tabs:state(resizing):not([noslide]):before{transition:none}a-tabs:not([noslide]):not(:has(a-tab:state(selected))):before{display:none}@media(prefers-reduced-motion:reduce){a-tabs:not([noslide]):before{transition:none}}a-tabs:not([noslide]) a-tab:state(selected){--tab-bg: transparent;box-shadow:none}a-tabs:not([noslide],[priority=secondary],[priority=tertiary]):before{background:var(--tab-selected-bg);border-radius:var(--tab-radius);box-shadow:var(--tab-selected-shadow)}a-tabs:not([noslide])[priority=secondary]:before{background:var(--tab-secondary-bg);border-radius:var(--tab-radius);box-shadow:var(--tab-selected-shadow)}a-tabs:not([noslide])[priority=tertiary] a-tab:state(selected){--tab-underline-size: 1px;--tab-underline-color: transparent}a-tabs:not([noslide])[priority=tertiary]:before{z-index:2;border-bottom:1px solid var(--tab-selected-text)}a-tabs[orientation=vertical]:not([noslide])[priority=tertiary]:before{border-bottom:0;border-inline-end:1px solid var(--tab-selected-text)}}@media(forced-colors:active){a-tabs:not([priority=secondary],[priority=tertiary]){background-color:Canvas;border:1px solid CanvasText;box-shadow:none}a-tabs[priority=tertiary] a-tab{--tab-underline-size: 0px;--tab-underline-color: transparent}a-tabs[priority=tertiary] a-tab:state(selected){--tab-underline-size: 2px;--tab-underline-color: CanvasText}a-tabs:not([priority=secondary],[priority=tertiary]) a-tab:state(selected){--anta-forced-foreground: ButtonFace;forced-color-adjust:none;color:ButtonFace;background-color:ButtonText;border:1px solid ButtonText;box-shadow:none}a-tabs[priority=secondary] a-tab:state(selected){background-color:Canvas;border:1px solid CanvasText;box-shadow:none}@supports (anchor-scope: all){a-tabs:not([noslide],[priority=tertiary]) a-tab:state(selected){background-color:transparent;border:0}a-tabs:not([noslide])[priority=tertiary] a-tab:state(selected){--tab-underline-size: 0px;--tab-underline-color: transparent}a-tabs:not([noslide],[priority=secondary],[priority=tertiary]):before{forced-color-adjust:none;background-color:ButtonText;border:1px solid ButtonText;box-shadow:none}a-tabs:not([noslide])[priority=secondary]:before{forced-color-adjust:none;background-color:Canvas;border:1px solid CanvasText;box-shadow:none}a-tabs:not([noslide])[priority=tertiary]:before{forced-color-adjust:none;border-bottom-width:2px;border-bottom-color:CanvasText}a-tabs[orientation=vertical]:not([noslide])[priority=tertiary]:before{border-inline-end-width:2px;border-inline-end-color:CanvasText}}}}
|
|
1
|
+
@layer base,anta,components,utilities;@layer anta.reset,anta.components,anta.theme;@layer anta.components{a-tabs{--_fs: 15px;--_lh: 20px;--_pb: 1px;--tab-padding-x: 9px;--tab-height: 28px;--tab-radius: 4px;--tabs-gap: 3px;--tab-timing: .15s ease-out;--tabs-tone-source: var(--anta-seed-neutral);--tab-fg-rest: var(--text-3);--tab-selected-text: var(--text-1);--tab-text-2: var(--text-2);--tabs-track-bg: light-dark( oklch(from var(--tabs-tone-source) .55 .008 h / .06), oklch(from var(--tabs-tone-source) .8 .008 h / .07) );--tabs-track-border: var(--border-4);--tabs-track-shadow: inset 0 0 0px .5px var(--tabs-track-border);--tab-selected-bg: var(--bg-1);--tab-selected-border: var(--border-2);--tab-selected-shadow: inset 0 0 0px .5px var(--tab-selected-border);--tab-secondary-neutral-bg: light-dark( oklch(from var(--anta-seed-neutral) .55 .008 h / .03), oklch(from var(--anta-seed-neutral) .8 .008 h / .08) );--tab-secondary-bg: var(--tab-secondary-neutral-bg);display:flex;flex-direction:row;align-items:stretch;gap:var(--tabs-gap);padding:0;width:fit-content;align-self:flex-start;min-width:0;max-width:100%;overflow:hidden;scroll-behavior:smooth}a-tabs[size=small]{--_fs: 13px;--_lh: 16px;--_pb: .5px;--tab-padding-x: 7px;--tab-height: 24px}a-tabs[size=large]{--_fs: 17px;--_lh: 24px;--_pb: 1.5px;--tab-padding-x: 13px;--tab-height: 32px}a-tabs a-tab :is(a-icon,a-loader){--icon-size: 16px}a-tabs[size=small] a-tab :is(a-icon,a-loader){--icon-size: 14px}a-tabs[size=large] a-tab :is(a-icon,a-loader){--icon-size: 18px}a-tabs[tone=brand],a-tab[tone=brand]{--tabs-tone-source: var(--anta-seed-brand);--tab-selected-text: var(--text-1-brand);--tab-text-2: var(--text-2-brand);--tab-rest-tone: var(--text-3-brand);--tabs-track-border: var(--border-4-brand);--tab-selected-border: var(--border-2-brand)}a-tabs[tone=info],a-tab[tone=info]{--tabs-tone-source: var(--anta-seed-info);--tab-selected-text: var(--text-1-info);--tab-text-2: var(--text-2-info);--tab-rest-tone: var(--text-3-info);--tabs-track-border: var(--border-4-info);--tab-selected-border: var(--border-2-info)}a-tabs[tone=success],a-tab[tone=success]{--tabs-tone-source: var(--anta-seed-success);--tab-selected-text: var(--text-1-success);--tab-text-2: var(--text-2-success);--tab-rest-tone: var(--text-3-success);--tabs-track-border: var(--border-4-success);--tab-selected-border: var(--border-2-success)}a-tabs[tone=warning],a-tab[tone=warning]{--tabs-tone-source: var(--anta-seed-warning);--tab-selected-text: var(--text-1-warning);--tab-text-2: var(--text-2-warning);--tab-rest-tone: var(--text-3-warning);--tabs-track-border: var(--border-4-warning);--tab-selected-border: var(--border-2-warning)}a-tabs[tone=critical],a-tab[tone=critical]{--tabs-tone-source: var(--anta-seed-critical);--tab-selected-text: var(--text-1-critical);--tab-text-2: var(--text-2-critical);--tab-rest-tone: var(--text-3-critical);--tabs-track-border: var(--border-4-critical);--tab-selected-border: var(--border-2-critical)}a-tab[tone=neutral]{--tabs-tone-source: var(--anta-seed-neutral);--tab-selected-text: var(--text-1);--tab-text-2: var(--text-2);--tab-rest-tone: var(--text-3);--tabs-track-border: var(--border-4);--tab-selected-border: var(--border-2)}a-tabs[tone]:not([tone=""],[tone=neutral]),a-tab[tone]:not([tone=""],[tone=neutral]){--tabs-track-bg: light-dark( oklch(from var(--tabs-tone-source) .55 .14 h / .06), oklch(from var(--tabs-tone-source) .8 .12 h / .07) );--tab-secondary-bg: light-dark( oklch(from var(--tabs-tone-source) .55 .14 h / .03), oklch(from var(--tabs-tone-source) .8 .12 h / .08) )}a-tabs:has(>a-tab[tone=brand]:state(selected)){--tabs-indicator-tone-source: var(--anta-seed-brand);--tab-selected-text: var(--text-1-brand);--tab-selected-border: var(--border-2-brand)}a-tabs:has(>a-tab[tone=info]:state(selected)){--tabs-indicator-tone-source: var(--anta-seed-info);--tab-selected-text: var(--text-1-info);--tab-selected-border: var(--border-2-info)}a-tabs:has(>a-tab[tone=success]:state(selected)){--tabs-indicator-tone-source: var(--anta-seed-success);--tab-selected-text: var(--text-1-success);--tab-selected-border: var(--border-2-success)}a-tabs:has(>a-tab[tone=warning]:state(selected)){--tabs-indicator-tone-source: var(--anta-seed-warning);--tab-selected-text: var(--text-1-warning);--tab-selected-border: var(--border-2-warning)}a-tabs:has(>a-tab[tone=critical]:state(selected)){--tabs-indicator-tone-source: var(--anta-seed-critical);--tab-selected-text: var(--text-1-critical);--tab-selected-border: var(--border-2-critical)}a-tabs:has(>a-tab:is([tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical]):state(selected)){--tab-secondary-bg: light-dark( oklch(from var(--tabs-indicator-tone-source) .55 .14 h / .03), oklch(from var(--tabs-indicator-tone-source) .8 .12 h / .08) )}a-tabs:has(>a-tab[tone=neutral]:state(selected)){--tab-selected-text: var(--text-1);--tab-selected-border: var(--border-2);--tab-secondary-bg: var(--tab-secondary-neutral-bg)}a-tabs[tone]:not([tone=""],[tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical]),a-tab[tone]:not([tone=""],[tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical]){--tabs-tone-source: #635b65;--tab-selected-text: light-dark(oklch(from var(--tabs-tone-source) .38 .13 h), oklch(from var(--tabs-tone-source) .83 .1 h));--tab-text-2: light-dark(oklch(from var(--tabs-tone-source) .45 .13 h), oklch(from var(--tabs-tone-source) .76 .11 h));--tab-rest-tone: light-dark(oklch(from var(--tabs-tone-source) .45 .13 h / .8), oklch(from var(--tabs-tone-source) .76 .11 h / .8));--tabs-track-border: light-dark(oklch(from var(--tabs-tone-source) .9 .045 h), oklch(from var(--tabs-tone-source) .26 .055 h));--tab-selected-border: light-dark(oklch(from var(--tabs-tone-source) .8 .09 h), oklch(from var(--tabs-tone-source) .4 .11 h));@supports (color: attr(probe type(<color>),red)){--tabs-tone-source: attr(tone type(<color>), #635b65)}}a-tabs a-tab{--tab-fg: var(--tab-fg-rest);--tab-bg: transparent}a-tabs:not([orientation=vertical]) a-tab{flex:1 1 0;max-width:max-content}a-tabs[fill]{width:100%;align-self:stretch}a-tabs[fill]:not([orientation=vertical]) a-tab{flex:1 1 0;max-width:none}@media(hover:hover)and (pointer:fine){a-tabs a-tab:hover{--tab-fg: var(--tab-selected-text)}}a-tabs:not([priority=secondary],[priority=tertiary]){background:var(--tabs-track-bg);box-shadow:var(--tabs-track-shadow);border-radius:4px}a-tabs[round]{--tabs-round: 999px;--tab-radius: var(--tabs-round, 999px);@supports (border-radius: attr(probe type(<length>),1px)){--tabs-round: attr(round type(<length>), 999px)}}a-tabs[round]:not([priority=secondary],[priority=tertiary]){border-radius:var(--tab-radius)}a-tabs:not([priority=secondary],[priority=tertiary]) a-tab:state(selected){--tab-fg: var(--tab-selected-text);--tab-bg: var(--tab-selected-bg);box-shadow:var(--tab-selected-shadow)}a-tabs[tone]:not([tone=""],[tone=neutral]),a-tab[tone]:not([tone=""],[tone=neutral]){--tab-fg-rest: var(--tab-rest-tone)}@media(hover:hover)and (pointer:fine){a-tabs[priority=secondary] a-tab:hover{--tab-fg: var(--tab-selected-text)}}a-tabs[priority=secondary] a-tab:state(selected){--tab-fg: var(--tab-selected-text);--tab-bg: var(--tab-secondary-bg);box-shadow:var(--tab-selected-shadow)}a-tabs[priority=tertiary] a-tab{--tab-underline-size: 1px;--tab-underline-color: transparent;position:relative;border-radius:0}a-tabs[priority=tertiary] a-tab:after{content:"";position:absolute;inset:0;box-sizing:border-box;pointer-events:none;border-bottom:var(--tab-underline-size) solid var(--tab-underline-color);transition:border-width var(--tab-timing),border-color var(--tab-timing)}a-tabs[orientation=vertical][priority=tertiary] a-tab:after{border-bottom:0;border-inline-end:var(--tab-underline-size) solid var(--tab-underline-color)}@media(hover:hover)and (pointer:fine){a-tabs[priority=tertiary] a-tab:hover{--tab-fg: var(--tab-text-2)}}a-tabs[priority=tertiary] a-tab:state(selected){--tab-fg: var(--tab-selected-text);--tab-underline-size: 1px;--tab-underline-color: var(--tab-selected-text)}a-tabs[orientation=vertical]{flex-direction:column;align-items:stretch;max-width:none;overflow-x:hidden;overflow-y:auto;flex-shrink:0}a-tabs[orientation=vertical] a-tab{justify-content:flex-start;flex-shrink:0}@supports (anchor-scope: all){a-tabs:not([noslide]){position:relative;anchor-scope:all}a-tabs:not([noslide]) a-tab{position:relative;z-index:1}a-tabs:not([noslide]) a-tab:state(selected){anchor-name:--tabs-active}a-tabs:not([noslide]):before{content:"";position:absolute;z-index:0;box-sizing:border-box;position-anchor:--tabs-active;top:anchor(top);right:anchor(right);bottom:anchor(bottom);left:anchor(left);transition:top var(--tab-timing),right var(--tab-timing),bottom var(--tab-timing),left var(--tab-timing)}a-tabs:state(resizing):not([noslide]):before{transition:none}a-tabs:not([noslide]):not(:has(a-tab:state(selected))):before{display:none}@media(prefers-reduced-motion:reduce){a-tabs:not([noslide]):before{transition:none}}a-tabs:not([noslide]) a-tab:state(selected){--tab-bg: transparent;box-shadow:none}a-tabs:not([noslide],[priority=secondary],[priority=tertiary]):before{background:var(--tab-selected-bg);border-radius:var(--tab-radius);box-shadow:var(--tab-selected-shadow)}a-tabs:not([noslide])[priority=secondary]:before{background:var(--tab-secondary-bg);border-radius:var(--tab-radius);box-shadow:var(--tab-selected-shadow)}a-tabs:not([noslide])[priority=tertiary] a-tab:state(selected){--tab-underline-size: 1px;--tab-underline-color: transparent}a-tabs:not([noslide])[priority=tertiary]:before{z-index:2;border-bottom:1px solid var(--tab-selected-text)}a-tabs[orientation=vertical]:not([noslide])[priority=tertiary]:before{border-bottom:0;border-inline-end:1px solid var(--tab-selected-text)}}@media(forced-colors:active){a-tabs:not([priority=secondary],[priority=tertiary]){background-color:Canvas;border:1px solid CanvasText;box-shadow:none}a-tabs[priority=tertiary] a-tab{--tab-underline-size: 0px;--tab-underline-color: transparent}a-tabs[priority=tertiary] a-tab:state(selected){--tab-underline-size: 2px;--tab-underline-color: CanvasText}a-tabs:not([priority=secondary],[priority=tertiary]) a-tab:state(selected){--anta-forced-foreground: ButtonFace;forced-color-adjust:none;color:ButtonFace;background-color:ButtonText;border:1px solid ButtonText;box-shadow:none}a-tabs[priority=secondary] a-tab:state(selected){background-color:Canvas;border:1px solid CanvasText;box-shadow:none}@supports (anchor-scope: all){a-tabs:not([noslide],[priority=tertiary]) a-tab:state(selected){background-color:transparent;border:0}a-tabs:not([noslide])[priority=tertiary] a-tab:state(selected){--tab-underline-size: 0px;--tab-underline-color: transparent}a-tabs:not([noslide],[priority=secondary],[priority=tertiary]):before{forced-color-adjust:none;background-color:ButtonText;border:1px solid ButtonText;box-shadow:none}a-tabs:not([noslide])[priority=secondary]:before{forced-color-adjust:none;background-color:Canvas;border:1px solid CanvasText;box-shadow:none}a-tabs:not([noslide])[priority=tertiary]:before{forced-color-adjust:none;border-bottom-width:2px;border-bottom-color:CanvasText}a-tabs[orientation=vertical]:not([noslide])[priority=tertiary]:before{border-inline-end-width:2px;border-inline-end-color:CanvasText}}}}
|
|
@@ -13,7 +13,7 @@ export declare class ATabsElement extends HTMLElementBase {
|
|
|
13
13
|
private lastSelected;
|
|
14
14
|
private alive;
|
|
15
15
|
private childrenReady;
|
|
16
|
-
/**
|
|
16
|
+
/** Applied tab value, or `null` when empty. Read-only; supply selection through `state`. */
|
|
17
17
|
get value(): string | null;
|
|
18
18
|
constructor();
|
|
19
19
|
connectedCallback(): void;
|
package/dist/elements/a-tabs.js
CHANGED
|
@@ -21,7 +21,7 @@ class ATabsElement extends HTMLElementBase {
|
|
|
21
21
|
// `t.selected` as own properties that shadow the accessors after upgrade.
|
|
22
22
|
// Microtasks run after the adopting task's upgrades, so deferring is enough.
|
|
23
23
|
childrenReady = false;
|
|
24
|
-
/**
|
|
24
|
+
/** Applied tab value, or `null` when empty. Read-only; supply selection through `state`. */
|
|
25
25
|
get value() {
|
|
26
26
|
return this.#currentValue;
|
|
27
27
|
}
|
|
@@ -31,7 +31,7 @@ class ATabsElement extends HTMLElementBase {
|
|
|
31
31
|
}
|
|
32
32
|
connectedCallback() {
|
|
33
33
|
if (!this.seeded) {
|
|
34
|
-
this.uncontrolledValue = this.getAttribute("default-state");
|
|
34
|
+
this.uncontrolledValue = this.getAttribute("state") ?? this.getAttribute("default-state");
|
|
35
35
|
this.seeded = true;
|
|
36
36
|
}
|
|
37
37
|
this.addEventListener("click", this.onClick);
|
|
@@ -60,8 +60,10 @@ class ATabsElement extends HTMLElementBase {
|
|
|
60
60
|
}
|
|
61
61
|
attributeChangedCallback(name, oldValue, newValue) {
|
|
62
62
|
if (name === "noslide" && this.isConnected) this.#syncResizeObserver();
|
|
63
|
+
const previous = oldValue ?? this.uncontrolledValue;
|
|
64
|
+
if (name === "state") this.uncontrolledValue = newValue ?? oldValue;
|
|
63
65
|
this.sync();
|
|
64
|
-
if (name === "state" && this.alive &&
|
|
66
|
+
if (name === "state" && this.alive && this.#currentValue !== previous) this.emitChange();
|
|
65
67
|
}
|
|
66
68
|
formDisabledCallback(disabled) {
|
|
67
69
|
if (disabled) this.internals?.states?.add("disabled");
|
|
@@ -159,7 +161,7 @@ class ATabsElement extends HTMLElementBase {
|
|
|
159
161
|
}
|
|
160
162
|
}
|
|
161
163
|
// Native `change`, fired *after* a selection applies (user pick or a controlled
|
|
162
|
-
// `
|
|
164
|
+
// `value` update) — the post-apply counterpart to the cancelable `statechange`.
|
|
163
165
|
emitChange() {
|
|
164
166
|
this.dispatchEvent(new Event("change", { bubbles: true }));
|
|
165
167
|
}
|
package/dist/elements/a-tag.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer base,anta,components,utilities;@layer anta.reset,anta.components,anta.theme;@layer anta.components{a-tag{--tag-tone-source: var(--anta-seed-neutral);--tag-tint: light-dark(oklch(from var(--tag-tone-source) .55 .03 h), oklch(from var(--tag-tone-source) .63 .04 h));--tag-bg-solid: light-dark(oklch(from var(--tag-tone-source) .55 .015 h), oklch(from var(--tag-tone-source) .48 .015 h));--tag-text: var(--text-3);--tag-edge: var(--text-2);--tag-bg: light-dark(color-mix(in oklch, var(--tag-tint) 10%, transparent), color-mix(in oklch, var(--tag-tint) 20%, transparent));--tag-border: light-dark(color-mix(in oklch, var(--tag-tint) 15%, transparent), color-mix(in oklch, var(--tag-tint) 25%, transparent));--tag-separator: color-mix(in oklch, var(--tag-text) 30%, transparent);--tag-padding-block: 1.5px;--tag-padding-inline: 6.5px;--tag-icon-size: 13px;--tag-label-weight: 600;--tag-gap: .6ch;display:inline-flex;align-items:center;gap:var(--tag-gap);box-sizing:border-box;vertical-align:middle;overflow:hidden;white-space:nowrap;-webkit-user-drag:none;color:var(--tag-text);background:var(--tag-bg);border:.5px solid var(--tag-border);border-radius:22px;padding-block:var(--tag-padding-block);padding-inline:var(--tag-padding-inline);font-family:var(--sans-serif);font-weight:450;font-size:12px;line-height:16px;text-transform:none;letter-spacing:.1ch;font-variant-numeric:lining-nums tabular-nums}a-tag a-icon{--icon-size: var(--tag-icon-size);flex:none}a-tag a-tag-label,a-tag a-tag-value{display:inline-block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}a-tag a-tag-value{font-weight:450}a-tag a-tag-label{font-weight:var(--tag-label-weight)}a-tag:has(>a-icon:first-child){padding-inline-start:max(0px,var(--tag-padding-inline) - 2px)}a-tag:has(>a-icon:last-child){padding-inline-end:max(0px,var(--tag-padding-inline) - 2px)}a-tag>:not(a-icon,a-tag-label,a-tag-value)~:not(a-icon,a-tag-label,a-tag-value){padding-left:var(--tag-gap);border-left:.5px solid var(--tag-separator)}a-tag[tone]:not([tone=""],[tone=neutral]){--tag-tint: light-dark(oklch(from var(--tag-tone-source) .57 .16 h), oklch(from var(--tag-tone-source) .63 .17 h));--tag-bg-solid: light-dark(oklch(from var(--tag-tone-source) .58 .175 h), oklch(from var(--tag-tone-source) .46 .165 h))}a-tag[tone=brand]{--tag-tone-source: var(--anta-seed-brand);--tag-text: var(--text-3-brand);--tag-edge: var(--text-2-brand)}a-tag[tone=info]{--tag-tone-source: var(--anta-seed-info);--tag-text: var(--text-3-info);--tag-edge: var(--text-2-info)}a-tag[tone=success]{--tag-tone-source: var(--anta-seed-success);--tag-text: var(--text-3-success);--tag-edge: var(--text-2-success)}a-tag[tone=warning]{--tag-tone-source: var(--anta-seed-warning);--tag-text: var(--text-3-warning);--tag-edge: var(--text-2-warning)}a-tag[tone=critical]{--tag-tone-source: var(--anta-seed-critical);--tag-text: var(--text-3-critical);--tag-edge: var(--text-2-critical)}a-tag[tone]:not([tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical]){--tag-tone-source: currentColor;--tag-text: light-dark( color-mix(in oklch, oklch(from var(--tag-tone-source) .43 .15 h) 80%, transparent), color-mix(in oklch, oklch(from var(--tag-tone-source) .77 .11 h) 80%, transparent) );--tag-edge: light-dark(oklch(from var(--tag-tone-source) .43 .15 h), oklch(from var(--tag-tone-source) .77 .11 h));@supports (color: attr(probe type(<color>),red)){--tag-tone-source: attr(tone type(<color>), currentColor)}}a-tag[priority=primary]{--tag-bg: var(--tag-bg-solid);--tag-text: #fff}a-tag[priority=primary][tone]:not([tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical]){--tag-text: #fff}a-tag[priority=tertiary]{--tag-bg: transparent;--tag-border: light-dark( color-mix(in oklch, var(--tag-edge) 20%, transparent), color-mix(in oklch, var(--tag-edge) 30%, transparent) )}a-tag[size=small]{--tag-padding-block: .5px;--tag-padding-inline: 4.5px;--tag-icon-size: 11px;font-size:11px;line-height:14px}a-tag[size=large]{--tag-padding-block: 2.5px;--tag-padding-inline: 8.5px;--tag-icon-size: 15px;font-size:13px;line-height:18px}a-tag[allcaps]{font-size:11px;text-transform:uppercase}a-tag[size=small][allcaps]{font-size:10px}a-tag[size=large][allcaps]{font-size:12px}@media(forced-colors:active){a-tag{--anta-forced-foreground: CanvasText;color:CanvasText;background-color:Canvas;border:1px solid CanvasText}a-tag[priority=primary]{--anta-forced-foreground: ButtonFace;color:ButtonFace;background-color:ButtonText;border-color:ButtonText}a-tag[priority=primary]{forced-color-adjust:none}a-tag[priority=tertiary]{border-style:dashed}}}
|
|
1
|
+
@layer base,anta,components,utilities;@layer anta.reset,anta.components,anta.theme;@layer anta.components{a-tag{--tag-tone-source: var(--anta-seed-neutral);--tag-tint: light-dark(oklch(from var(--tag-tone-source) .55 .03 h), oklch(from var(--tag-tone-source) .63 .04 h));--tag-bg-solid: light-dark(oklch(from var(--tag-tone-source) .55 .015 h), oklch(from var(--tag-tone-source) .48 .015 h));--tag-text: var(--text-3);--tag-edge: var(--text-2);--tag-bg-secondary: light-dark(color-mix(in oklch, var(--tag-tint) 10%, transparent), color-mix(in oklch, var(--tag-tint) 20%, transparent));--tag-bg: var(--tag-bg-secondary);--tag-border: light-dark(color-mix(in oklch, var(--tag-tint) 15%, transparent), color-mix(in oklch, var(--tag-tint) 25%, transparent));--tag-separator: color-mix(in oklch, var(--tag-text) 30%, transparent);--tag-padding-block: 1.5px;--tag-padding-inline: 6.5px;--tag-icon-size: 13px;--tag-label-weight: 600;--tag-gap: .6ch;display:inline-flex;align-items:center;gap:var(--tag-gap);box-sizing:border-box;vertical-align:middle;overflow:hidden;white-space:nowrap;-webkit-user-drag:none;color:var(--tag-text);background:var(--tag-bg);border:.5px solid var(--tag-border);border-radius:22px;padding-block:var(--tag-padding-block);padding-inline:var(--tag-padding-inline);font-family:var(--sans-serif);font-weight:450;font-size:12px;line-height:16px;text-transform:none;letter-spacing:.1ch;font-variant-numeric:lining-nums tabular-nums}a-tag a-icon{--icon-size: var(--tag-icon-size);flex:none}a-tag a-tag-label,a-tag a-tag-value{display:inline-block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}a-tag a-tag-value{font-weight:450}a-tag a-tag-label{font-weight:var(--tag-label-weight)}a-tag:has(>a-icon:first-child){padding-inline-start:max(0px,var(--tag-padding-inline) - 2px)}a-tag:has(>a-icon:last-child){padding-inline-end:max(0px,var(--tag-padding-inline) - 2px)}a-tag>:not(a-icon,a-tag-label,a-tag-value)~:not(a-icon,a-tag-label,a-tag-value){padding-left:var(--tag-gap);border-left:.5px solid var(--tag-separator)}a-tag[tone]:not([tone=""],[tone=neutral]){--tag-tint: light-dark(oklch(from var(--tag-tone-source) .57 .16 h), oklch(from var(--tag-tone-source) .63 .17 h));--tag-bg-solid: light-dark(oklch(from var(--tag-tone-source) .58 .175 h), oklch(from var(--tag-tone-source) .46 .165 h))}a-tag[tone=brand]{--tag-tone-source: var(--anta-seed-brand);--tag-text: var(--text-3-brand);--tag-edge: var(--text-2-brand)}a-tag[tone=info]{--tag-tone-source: var(--anta-seed-info);--tag-text: var(--text-3-info);--tag-edge: var(--text-2-info)}a-tag[tone=success]{--tag-tone-source: var(--anta-seed-success);--tag-text: var(--text-3-success);--tag-edge: var(--text-2-success)}a-tag[tone=warning]{--tag-tone-source: var(--anta-seed-warning);--tag-text: var(--text-3-warning);--tag-edge: var(--text-2-warning)}a-tag[tone=critical]{--tag-tone-source: var(--anta-seed-critical);--tag-text: var(--text-3-critical);--tag-edge: var(--text-2-critical)}a-tag[tone]:not([tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical]){--tag-tone-source: currentColor;--tag-text: light-dark( color-mix(in oklch, oklch(from var(--tag-tone-source) .43 .15 h) 80%, transparent), color-mix(in oklch, oklch(from var(--tag-tone-source) .77 .11 h) 80%, transparent) );--tag-edge: light-dark(oklch(from var(--tag-tone-source) .43 .15 h), oklch(from var(--tag-tone-source) .77 .11 h));@supports (color: attr(probe type(<color>),red)){--tag-tone-source: attr(tone type(<color>), currentColor)}}a-tag[priority=primary]{--tag-bg: var(--tag-bg-solid);--tag-text: #fff}a-tag[priority=primary][tone]:not([tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical]){--tag-text: #fff}a-tag[priority=tertiary]{--tag-bg: transparent;--tag-border: light-dark( color-mix(in oklch, var(--tag-edge) 20%, transparent), color-mix(in oklch, var(--tag-edge) 30%, transparent) )}a-tag[size=small]{--tag-padding-block: .5px;--tag-padding-inline: 4.5px;--tag-icon-size: 11px;font-size:11px;line-height:14px}a-tag[size=large]{--tag-padding-block: 2.5px;--tag-padding-inline: 8.5px;--tag-icon-size: 15px;font-size:13px;line-height:18px}a-tag[allcaps]{font-size:11px;text-transform:uppercase}a-tag[size=small][allcaps]{font-size:10px}a-tag[size=large][allcaps]{font-size:12px}@media(forced-colors:active){a-tag{--anta-forced-foreground: CanvasText;color:CanvasText;background-color:Canvas;border:1px solid CanvasText}a-tag[priority=primary]{--anta-forced-foreground: ButtonFace;color:ButtonFace;background-color:ButtonText;border-color:ButtonText}a-tag[priority=primary]{forced-color-adjust:none}a-tag[priority=tertiary]{border-style:dashed}}}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import './a-tag.css';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import "./a-tag.css";
|
package/dist/elements/a-text.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer base,anta,components,utilities;@layer anta.reset,anta.components,anta.theme;@layer anta.components{a-text{--text-color: var(--text-2);--text-link-color: var(--link-color);--text-link-hover: var(--link-color-hover);display:block;font-family:var(--sans-serif);color:var(--text-color);font-size:15px;line-height:20px;text-wrap:pretty}a-text[size=small]{font-size:13px;line-height:16px}a-text[size=medium]{font-size:15px;line-height:20px}a-text[size=large]{font-size:17px;line-height:24px}a-text[inline]{display:inline-block}a-text[truncate]{min-width:0}a-text[priority=primary]{--text-color: var(--text-1)}a-text[priority=tertiary]{--text-color: var(--text-3);--text-link-color: currentColor;--text-link-hover: var(--text-2)}a-text[priority=quaternary]{--text-color: var(--text-4);--text-link-color: currentColor;--text-link-hover: var(--text-3)}a-text[tone=brand]{--text-color: var(--text-2-brand);--text-link-color: currentColor;--text-link-hover: var(--text-1-brand)}a-text[tone=brand][priority=primary]{--text-color: var(--text-1-brand)}a-text[tone=brand][priority=tertiary]{--text-color: var(--text-3-brand);--text-link-hover: var(--text-2-brand)}a-text[tone=brand][priority=quaternary]{--text-color: var(--text-4-brand);--text-link-hover: var(--text-3-brand)}a-text[tone=success]{--text-color: var(--text-2-success);--text-link-color: currentColor;--text-link-hover: var(--text-1-success)}a-text[tone=success][priority=primary]{--text-color: var(--text-1-success)}a-text[tone=success][priority=tertiary]{--text-color: var(--text-3-success);--text-link-hover: var(--text-2-success)}a-text[tone=success][priority=quaternary]{--text-color: var(--text-4-success);--text-link-hover: var(--text-3-success)}a-text[tone=critical]{--text-color: var(--text-2-critical);--text-link-color: currentColor;--text-link-hover: var(--text-1-critical)}a-text[tone=critical][priority=primary]{--text-color: var(--text-1-critical)}a-text[tone=critical][priority=tertiary]{--text-color: var(--text-3-critical);--text-link-hover: var(--text-2-critical)}a-text[tone=critical][priority=quaternary]{--text-color: var(--text-4-critical);--text-link-hover: var(--text-3-critical)}a-text[tone=warning]{--text-color: var(--text-2-warning);--text-link-color: currentColor;--text-link-hover: var(--text-1-warning)}a-text[tone=warning][priority=primary]{--text-color: var(--text-1-warning)}a-text[tone=warning][priority=tertiary]{--text-color: var(--text-3-warning);--text-link-hover: var(--text-2-warning)}a-text[tone=warning][priority=quaternary]{--text-color: var(--text-4-warning);--text-link-hover: var(--text-3-warning)}a-text[tone=info]{--text-color: var(--text-2-info);--text-link-color: currentColor;--text-link-hover: var(--text-1-info)}a-text[tone=info][priority=primary]{--text-color: var(--text-1-info)}a-text[tone=info][priority=tertiary]{--text-color: var(--text-3-info);--text-link-hover: var(--text-2-info)}a-text[tone=info][priority=quaternary]{--text-color: var(--text-4-info);--text-link-hover: var(--text-3-info)}a-text[tone]:not([tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical]){--text-tone-source: currentColor;--_text-tone: light-dark(oklch(from var(--text-tone-source) .41 .15 h), oklch(from var(--text-tone-source) .75 .11 h));--text-color: var(--_text-tone);--text-link-color: currentColor;--text-link-hover: light-dark(oklch(from var(--text-tone-source) .33 .15 h), oklch(from var(--text-tone-source) .82 .1 h));@supports (color: attr(probe type(<color>),red)){--text-tone-source: attr(tone type(<color>), currentColor)}}a-text[tone]:not([tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical])[priority=primary]{--text-color: light-dark(oklch(from var(--text-tone-source) .33 .15 h), oklch(from var(--text-tone-source) .82 .1 h))}a-text[tone]:not([tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical])[priority=tertiary]{--text-color: color-mix(in oklch, var(--_text-tone) 80%, transparent);--text-link-hover: var(--_text-tone)}a-text[tone]:not([tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical])[priority=quaternary]{--text-color: color-mix(in oklch, var(--_text-tone) 60%, transparent)}a-text a,a-text a:link,a-text a:visited{color:var(--text-link-color)}@media(hover:hover)and (pointer:fine){a-text a:hover{color:var(--text-link-hover);text-decoration-color:var(--text-link-hover)}}}
|
|
1
|
+
@layer base,anta,components,utilities;@layer anta.reset,anta.components,anta.theme;@layer anta.components{a-text{--line-clamp: 1;--text-color: var(--text-2);--text-link-color: var(--link-color);--text-link-hover: var(--link-color-hover);display:block;position:relative;font-family:var(--sans-serif);color:var(--text-color);font-size:15px;line-height:20px;text-wrap:pretty}a-text[size=small]{font-size:13px;line-height:16px}a-text[size=medium]{font-size:15px;line-height:20px}a-text[size=large]{font-size:17px;line-height:24px}a-text[inline]{display:inline-block}a-text[truncate]{min-width:0}a-text-content{display:contents}a-text>a-button:has(+a-text-content),a-text>a-text-content+a-button{display:none}a-text[truncate][expandable]:state(expanded)[collapsible]{box-sizing:border-box;padding-block-end:16px}a-text[truncate]:not([expandable]),a-text[truncate][expandable]>a-text-content{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:var(--line-clamp, 1);overflow:hidden}a-text[inline][truncate]:not([expandable]){display:-webkit-inline-box}a-text[truncate][expandable]>a-text-content{overflow:clip}a-text[truncate][expandable]:state(expanded)>a-text-content{display:block;-webkit-line-clamp:unset;overflow:visible}a-text[truncate][expandable]:state(overflowing):not(:state(expanded))>a-text-content{mask-image:linear-gradient(to bottom,black calc(100% - 2em),transparent 97%)}a-text[truncate="1"][expandable]:state(overflowing):not(:state(expanded))>a-text-content{mask-image:linear-gradient(to right,black calc(100% - 7ch),transparent 97%)}a-text[truncate="1"][expandable]:state(overflowing):not(:state(expanded)):dir(rtl)>a-text-content{mask-image:linear-gradient(to left,black calc(100% - 7ch),transparent 97%)}a-text[truncate][expandable]>a-button{appearance:none;background:transparent;box-shadow:none;border:none;border-radius:0;margin:0;padding:0;min-width:0;min-height:0;color:var(--text-3);cursor:pointer;font:inherit;font-variation-settings:inherit;display:none;position:absolute;z-index:1;inset-inline:0;bottom:0;width:auto;height:1.5em;opacity:0;transition:opacity .15s ease-out,color .15s ease-out}a-text[truncate][expandable]>a-button:is(:hover,:active){background:transparent;box-shadow:none;color:var(--text-1)}a-text[truncate][expandable]>a-button:before{content:"";position:absolute;inset-inline-end:3px;bottom:3px;width:6px;height:6px;border:solid currentColor;border-width:0 1.5px 1.5px 0;transform:rotate(45deg);transition:transform .15s ease-out}a-text[truncate][expandable]>a-button:after{content:none}a-text[truncate][expandable]:state(overflowing):not(:state(expanded))>a-button,a-text[truncate][expandable]:state(expanded)[collapsible]>a-button{display:block}a-text[truncate="1"][expandable]:not(:state(expanded))>a-button{inset-inline-start:auto;top:0;width:3em;height:auto}a-text[truncate][expandable]:state(expanded)[collapsible]>a-button{height:16px}a-text[truncate][expandable][expandable-inert]:state(overflowing):not(:state(expanded))>a-button{inset:0;width:auto;height:auto}a-text[truncate][expandable]:is(:hover,:focus-within)>a-button,a-text[truncate][expandable]:state(expanded)>a-button{opacity:1}a-text[truncate][expandable]:state(expanded)>a-button:before{transform:rotate(225deg)}@media(prefers-reduced-motion:reduce){a-text[truncate][expandable]>a-button,a-text[truncate][expandable]>a-button:before{transition:none}}@media(forced-colors:active){a-text[truncate][expandable]>a-text-content{mask-image:none}a-text[truncate][expandable]>a-button{color:ButtonText;opacity:1}}a-text[priority=primary]{--text-color: var(--text-1)}a-text[priority=tertiary]{--text-color: var(--text-3);--text-link-color: currentColor;--text-link-hover: var(--text-2)}a-text[priority=quaternary]{--text-color: var(--text-4);--text-link-color: currentColor;--text-link-hover: var(--text-3)}a-text[tone=brand]{--text-color: var(--text-2-brand);--text-link-color: currentColor;--text-link-hover: var(--text-1-brand)}a-text[tone=brand][priority=primary]{--text-color: var(--text-1-brand)}a-text[tone=brand][priority=tertiary]{--text-color: var(--text-3-brand);--text-link-hover: var(--text-2-brand)}a-text[tone=brand][priority=quaternary]{--text-color: var(--text-4-brand);--text-link-hover: var(--text-3-brand)}a-text[tone=success]{--text-color: var(--text-2-success);--text-link-color: currentColor;--text-link-hover: var(--text-1-success)}a-text[tone=success][priority=primary]{--text-color: var(--text-1-success)}a-text[tone=success][priority=tertiary]{--text-color: var(--text-3-success);--text-link-hover: var(--text-2-success)}a-text[tone=success][priority=quaternary]{--text-color: var(--text-4-success);--text-link-hover: var(--text-3-success)}a-text[tone=critical]{--text-color: var(--text-2-critical);--text-link-color: currentColor;--text-link-hover: var(--text-1-critical)}a-text[tone=critical][priority=primary]{--text-color: var(--text-1-critical)}a-text[tone=critical][priority=tertiary]{--text-color: var(--text-3-critical);--text-link-hover: var(--text-2-critical)}a-text[tone=critical][priority=quaternary]{--text-color: var(--text-4-critical);--text-link-hover: var(--text-3-critical)}a-text[tone=warning]{--text-color: var(--text-2-warning);--text-link-color: currentColor;--text-link-hover: var(--text-1-warning)}a-text[tone=warning][priority=primary]{--text-color: var(--text-1-warning)}a-text[tone=warning][priority=tertiary]{--text-color: var(--text-3-warning);--text-link-hover: var(--text-2-warning)}a-text[tone=warning][priority=quaternary]{--text-color: var(--text-4-warning);--text-link-hover: var(--text-3-warning)}a-text[tone=info]{--text-color: var(--text-2-info);--text-link-color: currentColor;--text-link-hover: var(--text-1-info)}a-text[tone=info][priority=primary]{--text-color: var(--text-1-info)}a-text[tone=info][priority=tertiary]{--text-color: var(--text-3-info);--text-link-hover: var(--text-2-info)}a-text[tone=info][priority=quaternary]{--text-color: var(--text-4-info);--text-link-hover: var(--text-3-info)}a-text[tone]:not([tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical]){--text-tone-source: currentColor;--_text-tone: light-dark(oklch(from var(--text-tone-source) .41 .15 h), oklch(from var(--text-tone-source) .75 .11 h));--text-color: var(--_text-tone);--text-link-color: currentColor;--text-link-hover: light-dark(oklch(from var(--text-tone-source) .33 .15 h), oklch(from var(--text-tone-source) .82 .1 h));@supports (color: attr(probe type(<color>),red)){--text-tone-source: attr(tone type(<color>), currentColor)}}a-text[tone]:not([tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical])[priority=primary]{--text-color: light-dark(oklch(from var(--text-tone-source) .33 .15 h), oklch(from var(--text-tone-source) .82 .1 h))}a-text[tone]:not([tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical])[priority=tertiary]{--text-color: color-mix(in oklch, var(--_text-tone) 80%, transparent);--text-link-hover: var(--_text-tone)}a-text[tone]:not([tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical])[priority=quaternary]{--text-color: color-mix(in oklch, var(--_text-tone) 60%, transparent)}a-text a,a-text a:link,a-text a:visited{color:var(--text-link-color)}@media(hover:hover)and (pointer:fine){a-text a:hover{color:var(--text-link-hover);text-decoration-color:var(--text-link-hover)}}}
|
|
@@ -1,55 +1,18 @@
|
|
|
1
1
|
import { HTMLElementBase } from '../anta_helpers';
|
|
2
2
|
import './a-text.css';
|
|
3
|
-
/**
|
|
4
|
-
*
|
|
5
|
-
*
|
|
6
|
-
* Styling notes (`a-text.css` ships comment-free):
|
|
7
|
-
* - `a-text[truncate] { min-width: 0 }` is the one external requirement of
|
|
8
|
-
* the shadow clamp: the host must be allowed to shrink inside flex/grid
|
|
9
|
-
* parents so the inner clamp can actually clip content.
|
|
10
|
-
* - The default (no `priority`) is the SECONDARY level — body text reads at
|
|
11
|
-
* `--text-2` on the base rule; `priority="primary"` opts into the
|
|
12
|
-
* strongest `--text-1`.
|
|
13
|
-
* - Priority/tone link colors: levels 1–2 keep the brand link color; levels
|
|
14
|
-
* 3–5 mute the link to `currentColor` and step the hover up one level
|
|
15
|
-
* (3→2, 4→3, 5→4). Tinted variants do the same within their
|
|
16
|
-
* `--text-{N}-{tone}` ramp (level 1 has nothing above it — hover keeps the
|
|
17
|
-
* color and only the underline alpha changes).
|
|
18
|
-
* - The `a-text a` rules layer on anta's global `a` defaults from
|
|
19
|
-
* `reset.css`, overriding only color and the one-step-up hover color
|
|
20
|
-
* (underline thickness/offset/alpha are inherited); the hover repeats the
|
|
21
|
-
* underline color so it tracks the priority color. Hover is gated to
|
|
22
|
-
* `(hover: hover) and (pointer: fine)` to avoid sticky hover after a tap.
|
|
23
|
-
*/
|
|
3
|
+
/** Light-DOM text with overflow measurement and expansion. The element keeps
|
|
4
|
+
* state in ElementInternals; it never rewrites authored markup or attributes. */
|
|
24
5
|
export declare class ATextElement extends HTMLElementBase {
|
|
25
6
|
#private;
|
|
26
7
|
static observedAttributes: string[];
|
|
27
|
-
private slotEl;
|
|
28
|
-
/** The chevron — built only while expandable, removed on drop or one-way expand. */
|
|
29
|
-
private expandBtn?;
|
|
30
|
-
/** Expanded state lives on the element — a stateless wrapper can't hold it. */
|
|
31
|
-
private expanded;
|
|
32
|
-
private overflowObserver?;
|
|
33
|
-
private contentObserver?;
|
|
34
8
|
constructor();
|
|
9
|
+
addEventListener<K extends keyof HTMLElementEventMap>(type: K, callback: (this: HTMLElement, event: HTMLElementEventMap[K]) => unknown, options?: boolean | AddEventListenerOptions): void;
|
|
10
|
+
addEventListener(type: string, callback: EventListenerOrEventListenerObject | null, options?: boolean | AddEventListenerOptions): void;
|
|
35
11
|
connectedCallback(): void;
|
|
36
12
|
disconnectedCallback(): void;
|
|
37
13
|
attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
|
|
38
|
-
/**
|
|
39
|
-
*
|
|
40
|
-
* the host or light DOM. */
|
|
14
|
+
/** Whether the current clamp hides content. Also used by truncated-only
|
|
15
|
+
* tooltips. This layout read changes neither markup nor accessibility. */
|
|
41
16
|
get isTruncated(): boolean;
|
|
42
|
-
/** Create or remove the chevron to match `expandable`, then refresh it. */
|
|
43
|
-
private syncExpandButton;
|
|
44
|
-
private handleToggle;
|
|
45
|
-
private setExpanded;
|
|
46
|
-
private startOverflowObserver;
|
|
47
|
-
private stopOverflowObserver;
|
|
48
|
-
/** Toggle `slot.overflowing` (gates the fade + chevron) to whether the clamp
|
|
49
|
-
* clips. Frozen on while expanded; height catches wrapped text, width a long word. */
|
|
50
|
-
private measureOverflow;
|
|
51
|
-
/** Reflect state onto the button (label + `aria-expanded` + `.expanded`); a
|
|
52
|
-
* one-way expand removes it once open. */
|
|
53
|
-
private refreshButton;
|
|
54
17
|
}
|
|
55
18
|
export declare function register_a_text(): void;
|