@swell/swell-ui 0.0.0-stage → 0.1.1
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/CHANGELOG.md +22 -0
- package/README.md +165 -2
- package/custom-elements.json +8274 -0
- package/dist/chunks/badge-Dt6q8Cqa.js +11 -0
- package/dist/chunks/button-C7nCiu-t.js +123 -0
- package/dist/chunks/card-CvSQEug8.js +10 -0
- package/dist/chunks/checkbox-BRI_A1TP.js +99 -0
- package/dist/chunks/chip-BtnufSMG.js +48 -0
- package/dist/chunks/config-C-FYxOaJ.js +588 -0
- package/dist/chunks/define-BlQTa1g4.js +19 -0
- package/dist/chunks/description-BHfQ8meK.js +19 -0
- package/dist/chunks/disclosure-CET8-H6f.js +56 -0
- package/dist/chunks/divider-BfkO0c1j.js +27 -0
- package/dist/chunks/element-B4-_7TLZ.js +138 -0
- package/dist/chunks/input-Uun-ls2_.js +53 -0
- package/dist/chunks/link-8qHFEKQE.js +53 -0
- package/dist/chunks/link-D4NC86oc.js +24 -0
- package/dist/chunks/lookup-5icr_T6o.js +205 -0
- package/dist/chunks/lookup-list-Bw6OJoDS.js +19 -0
- package/dist/chunks/lookup-option-Mn3k8W2M.js +26 -0
- package/dist/chunks/popover-D3Ob6slA.js +92 -0
- package/dist/chunks/popup-Dbh2fchP.js +21 -0
- package/dist/chunks/quantity-h3wqn8tC.js +140 -0
- package/dist/chunks/radio-BhFDL3pO.js +192 -0
- package/dist/chunks/radio-option-hT29S8Zl.js +88 -0
- package/dist/chunks/select-DS1n_htj.js +331 -0
- package/dist/chunks/select-option-DoM9GAe0.js +66 -0
- package/dist/chunks/skeleton-DfPjhls9.js +13 -0
- package/dist/chunks/status-B23JZ5RQ.js +71 -0
- package/dist/chunks/tab-BpjFUbFO.js +107 -0
- package/dist/chunks/tabs-aWKq1Iaz.js +122 -0
- package/dist/chunks/text-ZWPy-iB3.js +26 -0
- package/dist/chunks/text-field-BB_MRt5h.js +158 -0
- package/dist/chunks/textarea-L6_OJ2IN.js +18 -0
- package/dist/chunks/thumbnail-CLe9AsFg.js +21 -0
- package/dist/chunks/toggle-C7-oPgWR.js +22 -0
- package/dist/chunks/ui-HcyMKwzs.js +11 -0
- package/dist/editors/vscode.css-custom-data.json +824 -0
- package/dist/editors/vscode.html-custom-data.json +1156 -0
- package/dist/editors/web-types.json +1706 -0
- package/dist/elements/badge.d.ts +1 -0
- package/dist/elements/badge.js +1 -0
- package/dist/elements/button.d.ts +1 -0
- package/dist/elements/button.js +1 -0
- package/dist/elements/card.d.ts +1 -0
- package/dist/elements/card.js +1 -0
- package/dist/elements/checkbox.d.ts +1 -0
- package/dist/elements/checkbox.js +1 -0
- package/dist/elements/chip.d.ts +1 -0
- package/dist/elements/chip.js +1 -0
- package/dist/elements/disclosure.d.ts +1 -0
- package/dist/elements/disclosure.js +1 -0
- package/dist/elements/divider.d.ts +1 -0
- package/dist/elements/divider.js +1 -0
- package/dist/elements/input.d.ts +1 -0
- package/dist/elements/input.js +1 -0
- package/dist/elements/link.d.ts +1 -0
- package/dist/elements/link.js +1 -0
- package/dist/elements/lookup-list.d.ts +1 -0
- package/dist/elements/lookup-list.js +1 -0
- package/dist/elements/lookup-option.d.ts +1 -0
- package/dist/elements/lookup-option.js +1 -0
- package/dist/elements/lookup.d.ts +1 -0
- package/dist/elements/lookup.js +1 -0
- package/dist/elements/popover.d.ts +1 -0
- package/dist/elements/popover.js +1 -0
- package/dist/elements/quantity.d.ts +1 -0
- package/dist/elements/quantity.js +1 -0
- package/dist/elements/radio-option.d.ts +1 -0
- package/dist/elements/radio-option.js +1 -0
- package/dist/elements/radio.d.ts +1 -0
- package/dist/elements/radio.js +1 -0
- package/dist/elements/select-option.d.ts +1 -0
- package/dist/elements/select-option.js +1 -0
- package/dist/elements/select.d.ts +1 -0
- package/dist/elements/select.js +1 -0
- package/dist/elements/skeleton.d.ts +1 -0
- package/dist/elements/skeleton.js +1 -0
- package/dist/elements/status.d.ts +1 -0
- package/dist/elements/status.js +1 -0
- package/dist/elements/tab.d.ts +1 -0
- package/dist/elements/tab.js +1 -0
- package/dist/elements/tabs.d.ts +1 -0
- package/dist/elements/tabs.js +1 -0
- package/dist/elements/text.d.ts +1 -0
- package/dist/elements/text.js +1 -0
- package/dist/elements/textarea.d.ts +1 -0
- package/dist/elements/textarea.js +1 -0
- package/dist/elements/thumbnail.d.ts +1 -0
- package/dist/elements/thumbnail.js +1 -0
- package/dist/elements/ui.d.ts +1 -0
- package/dist/elements/ui.js +1 -0
- package/dist/frameworks/jsx.d.ts +3589 -0
- package/dist/frameworks/preact.d.ts +9 -0
- package/dist/frameworks/solid.d.ts +7 -0
- package/dist/frameworks/svelte.d.ts +1676 -0
- package/dist/frameworks/vue.d.ts +827 -0
- package/dist/index.js +80 -0
- package/dist/react/badge.d.ts +12 -0
- package/dist/react/badge.js +4 -0
- package/dist/react/button.d.ts +16 -0
- package/dist/react/button.js +4 -0
- package/dist/react/card.d.ts +11 -0
- package/dist/react/card.js +4 -0
- package/dist/react/checkbox.d.ts +14 -0
- package/dist/react/checkbox.js +4 -0
- package/dist/react/chip.d.ts +12 -0
- package/dist/react/chip.js +4 -0
- package/dist/react/create.js +49 -0
- package/dist/react/disclosure.d.ts +11 -0
- package/dist/react/disclosure.js +4 -0
- package/dist/react/divider.d.ts +9 -0
- package/dist/react/divider.js +4 -0
- package/dist/react/index.d.ts +26 -0
- package/dist/react/index.js +26 -0
- package/dist/react/input.d.ts +28 -0
- package/dist/react/input.js +4 -0
- package/dist/react/link.d.ts +15 -0
- package/dist/react/link.js +4 -0
- package/dist/react/lookup-list.d.ts +9 -0
- package/dist/react/lookup-list.js +4 -0
- package/dist/react/lookup-option.d.ts +11 -0
- package/dist/react/lookup-option.js +4 -0
- package/dist/react/lookup.d.ts +28 -0
- package/dist/react/lookup.js +4 -0
- package/dist/react/popover.d.ts +11 -0
- package/dist/react/popover.js +4 -0
- package/dist/react/quantity.d.ts +15 -0
- package/dist/react/quantity.js +4 -0
- package/dist/react/radio-option.d.ts +11 -0
- package/dist/react/radio-option.js +4 -0
- package/dist/react/radio.d.ts +18 -0
- package/dist/react/radio.js +4 -0
- package/dist/react/select-option.d.ts +11 -0
- package/dist/react/select-option.js +4 -0
- package/dist/react/select.d.ts +20 -0
- package/dist/react/select.js +4 -0
- package/dist/react/skeleton.d.ts +11 -0
- package/dist/react/skeleton.js +4 -0
- package/dist/react/status.d.ts +12 -0
- package/dist/react/status.js +4 -0
- package/dist/react/tab.d.ts +10 -0
- package/dist/react/tab.js +4 -0
- package/dist/react/tabs.d.ts +17 -0
- package/dist/react/tabs.js +4 -0
- package/dist/react/text.d.ts +12 -0
- package/dist/react/text.js +4 -0
- package/dist/react/textarea.d.ts +23 -0
- package/dist/react/textarea.js +4 -0
- package/dist/react/thumbnail.d.ts +13 -0
- package/dist/react/thumbnail.js +4 -0
- package/dist/react/ui.d.ts +10 -0
- package/dist/react/ui.js +4 -0
- package/dist/types/components/core/badge/badge.d.ts +25 -0
- package/dist/types/components/core/button/button.d.ts +60 -0
- package/dist/types/components/core/card/card.d.ts +21 -0
- package/dist/types/components/core/checkbox/checkbox.d.ts +46 -0
- package/dist/types/components/core/chip/chip.d.ts +36 -0
- package/dist/types/components/core/disclosure/disclosure.d.ts +37 -0
- package/dist/types/components/core/divider/divider.d.ts +21 -0
- package/dist/types/components/core/index.d.ts +21 -0
- package/dist/types/components/core/input/input.d.ts +57 -0
- package/dist/types/components/core/link/link.d.ts +42 -0
- package/dist/types/components/core/lookup/lookup-list.d.ts +21 -0
- package/dist/types/components/core/lookup/lookup-option.d.ts +27 -0
- package/dist/types/components/core/lookup/lookup.d.ts +32 -0
- package/dist/types/components/core/popover/popover.d.ts +33 -0
- package/dist/types/components/core/quantity/quantity.d.ts +47 -0
- package/dist/types/components/core/radio/radio-option.d.ts +82 -0
- package/dist/types/components/core/radio/radio.d.ts +65 -0
- package/dist/types/components/core/select/select-option.d.ts +69 -0
- package/dist/types/components/core/select/select.d.ts +70 -0
- package/dist/types/components/core/skeleton/skeleton.d.ts +23 -0
- package/dist/types/components/core/status/status.d.ts +38 -0
- package/dist/types/components/core/tabs/tab.d.ts +76 -0
- package/dist/types/components/core/tabs/tabs.d.ts +46 -0
- package/dist/types/components/core/text/text.d.ts +23 -0
- package/dist/types/components/core/textarea/textarea.d.ts +45 -0
- package/dist/types/components/core/thumbnail/thumbnail.d.ts +27 -0
- package/dist/types/components/core/ui/ui.d.ts +16 -0
- package/dist/types/components/elements.d.ts +1 -0
- package/dist/types/react/create.d.ts +8 -0
- package/dist/types/runtime/config.d.ts +25 -0
- package/dist/types/runtime/css.d.ts +12 -0
- package/dist/types/runtime/define.d.ts +4 -0
- package/dist/types/runtime/description.d.ts +12 -0
- package/dist/types/runtime/element.d.ts +61 -0
- package/dist/types/runtime/focus.d.ts +5 -0
- package/dist/types/runtime/form.d.ts +5 -0
- package/dist/types/runtime/index.d.ts +2 -0
- package/dist/types/runtime/link.d.ts +17 -0
- package/dist/types/runtime/loader.d.ts +21 -0
- package/dist/types/runtime/popup.d.ts +8 -0
- package/dist/types/runtime/sheet.d.ts +31 -0
- package/dist/types/runtime/text-field.d.ts +47 -0
- package/dist/types/runtime/toggle.d.ts +8 -0
- package/dist/types/runtime/tokens.generated.d.ts +492 -0
- package/dist/types/runtime/values.d.ts +6 -0
- package/dist/types/runtime/variants.d.ts +4 -0
- package/package.json +136 -4
- package/resolver.json +111 -0
- package/src/components/core/badge/tokens.json +152 -0
- package/src/components/core/button/tokens.dark.json +16 -0
- package/src/components/core/button/tokens.json +232 -0
- package/src/components/core/card/tokens.json +35 -0
- package/src/components/core/checkbox/tokens.json +15 -0
- package/src/components/core/chip/tokens.json +144 -0
- package/src/components/core/link/tokens.json +24 -0
- package/src/components/core/radio/tokens.dark.json +17 -0
- package/src/components/core/radio/tokens.json +114 -0
- package/src/components/core/status/tokens.dark.json +71 -0
- package/src/components/core/status/tokens.json +135 -0
- package/src/components/core/tabs/tokens.json +80 -0
- package/src/components/core/text/tokens.json +222 -0
- package/src/components/core/thumbnail/tokens.json +46 -0
- package/tokens/border.json +38 -0
- package/tokens/color.dark.json +88 -0
- package/tokens/color.json +115 -0
- package/tokens/control.json +115 -0
- package/tokens/field.dark.json +65 -0
- package/tokens/field.json +158 -0
- package/tokens/focus.json +26 -0
- package/tokens/font.json +117 -0
- package/tokens/motion.json +49 -0
- package/tokens/overlay.json +81 -0
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { r as e, t } from "./define-BlQTa1g4.js";
|
|
2
|
+
import { n } from "./element-B4-_7TLZ.js";
|
|
3
|
+
// src/components/core/badge/badge.css?inline
|
|
4
|
+
var r = ":host{--_swell-badge-font-size:var(--swell-badge-font-size,var(--swell-font-footnote-size));--_swell-badge-height:var(--swell-badge-height,24px);--_swell-badge-color-border:var(--swell-badge-color-border,var(--swell-color-border));--_swell-badge-font-weight:var(--swell-badge-font-weight,var(--swell-font-strong-weight));--_swell-badge-color-accent:var(--swell-badge-color-accent,var(--swell-color-foreground));--_swell-badge-color-background:var(--swell-badge-color-background,var(--swell-color-foreground));--_swell-badge-color-foreground:var(--swell-badge-color-foreground,var(--swell-color-background))}:host([size=xsmall]){--_swell-badge-font-size:var(--swell-badge-xsmall-font-size,10px);--_swell-badge-height:var(--swell-badge-xsmall-height,16px);--_swell-badge-font-weight:var(--swell-badge-xsmall-font-weight,var(--swell-font-bold-weight))}:host([size=small]){--_swell-badge-font-size:var(--swell-badge-small-font-size,11px);--_swell-badge-height:var(--swell-badge-small-height,20px);--_swell-badge-font-weight:var(--swell-badge-small-font-weight,var(--swell-font-bold-weight))}:host([size=large]){--_swell-badge-font-size:var(--swell-badge-large-font-size,13px);--_swell-badge-height:var(--swell-badge-large-height,28px)}:host([size=xlarge]){--_swell-badge-font-size:var(--swell-badge-xlarge-font-size,14px);--_swell-badge-height:var(--swell-badge-xlarge-height,32px)}:host{justify-content:center;align-items:center;gap:calc(var(--_swell-badge-font-size) - 7px);box-sizing:border-box;height:var(--_swell-badge-height);min-width:var(--_swell-badge-height);padding:0 min(calc(var(--_swell-badge-height) / 2 - 4px), calc((var(--_swell-badge-height) - 2em / 3) / 2));border:var(--swell-border-width) solid var(--_swell-badge-color-border);font:var(--_swell-badge-font-weight) var(--_swell-badge-font-size) / 1 var(--swell-font-family);letter-spacing:var(--swell-font-tracking);white-space:nowrap;color:var(--_swell-badge-color-accent);background:0 0;border-radius:999px;display:inline-flex}:host(:state(filled)){background:var(--_swell-badge-color-background);color:var(--_swell-badge-color-foreground);border:none}:host slot[name=start]::slotted(svg){width:calc(var(--_swell-badge-font-size) + 1px);height:calc(var(--_swell-badge-font-size) + 1px);flex:none}:host slot[name=start]::slotted([hidden]){display:none}@media (forced-colors:active){:host,:host(:state(filled)){border:max(1px, var(--swell-border-width)) solid CanvasText}}", i = /* @__PURE__ */ e({ SwellBadge: () => a }), a = class extends n {
|
|
5
|
+
static group = "badge";
|
|
6
|
+
static appearance = "badge";
|
|
7
|
+
static styles = r;
|
|
8
|
+
static template = "<slot name=\"start\"></slot><slot></slot>";
|
|
9
|
+
};
|
|
10
|
+
t("swell-badge", a);
|
|
11
|
+
export { i as n, a as t };
|
|
@@ -0,0 +1,123 @@
|
|
|
1
|
+
import { m as e } from "./config-C-FYxOaJ.js";
|
|
2
|
+
import { n as t, r as n, t as r } from "./define-BlQTa1g4.js";
|
|
3
|
+
import { n as i, o as a, r as o } from "./element-B4-_7TLZ.js";
|
|
4
|
+
// src/components/core/button/button.css?inline
|
|
5
|
+
var s = ":host{--_swell-button-font-size:var(--swell-button-font-size,var(--swell-control-font-size));--_swell-button-height:var(--swell-button-height,var(--swell-control-height));--_swell-button-color-border:var(--swell-button-color-border,var(--swell-button-color-accent,var(--swell-color-accent)));--_swell-button-border-radius:var(--swell-button-border-radius,var(--swell-border-radius));--_swell-button-font-weight:var(--swell-button-font-weight,650);--_swell-button-font-tracking:var(--swell-button-font-tracking,var(--swell-font-tracking));--_swell-button-color-background:var(--swell-button-color-background,var(--swell-button-color-accent,var(--swell-color-accent)));--_swell-button-color-foreground:var(--swell-button-color-foreground,var(--swell-color-background));--_swell-button-shadow:var(--swell-button-shadow,0px 12px 24px -16px);--_swell-button-color-shadow:var(--swell-button-color-shadow,light-dark(#3a66f599,#5b8cff99));--_swell-button-color-accent:var(--swell-button-color-accent,var(--swell-color-accent));--_swell-button-hover-offset:var(--swell-button-hover-offset,-1px);--_swell-button-hover-shadow:var(--swell-button-hover-shadow,0px 16px 30px -16px)}:host([size=xsmall]){--_swell-button-font-size:var(--swell-button-xsmall-font-size,var(--swell-control-xsmall-font-size));--_swell-button-height:var(--swell-button-xsmall-height,var(--swell-control-xsmall-height))}:host([size=small]){--_swell-button-font-size:var(--swell-button-small-font-size,var(--swell-control-small-font-size));--_swell-button-height:var(--swell-button-small-height,var(--swell-control-small-height))}:host([size=large]){--_swell-button-font-size:var(--swell-button-large-font-size,var(--swell-control-large-font-size));--_swell-button-height:var(--swell-button-large-height,var(--swell-control-large-height));--_swell-button-font-tracking:var(--swell-button-large-font-tracking,-.01em)}:host([size=xlarge]){--_swell-button-font-size:var(--swell-button-xlarge-font-size,var(--swell-control-xlarge-font-size));--_swell-button-height:var(--swell-button-xlarge-height,var(--swell-control-xlarge-height));--_swell-button-font-tracking:var(--swell-button-xlarge-font-tracking,-.01em)}:host{justify-content:center;align-items:center;gap:calc(var(--_swell-button-font-size) - 6px);box-sizing:border-box;min-width:24px;height:var(--_swell-button-height);padding:0 calc(var(--_swell-button-height) / 2 - 4px);border:var(--swell-border-width) solid var(--_swell-button-color-border);border-radius:var(--_swell-button-border-radius);font:var(--_swell-button-font-weight) var(--_swell-button-font-size) / 1 var(--swell-font-family);letter-spacing:var(--_swell-button-font-tracking);white-space:nowrap;background:var(--_swell-button-color-background);color:var(--_swell-button-color-foreground);box-shadow:var(--_swell-button-shadow) var(--_swell-button-color-shadow);cursor:pointer;-webkit-user-select:none;user-select:none;transition:background-color var(--swell-motion-duration-fast) var(--swell-motion-easing), border-color var(--swell-motion-duration-fast) var(--swell-motion-easing), color var(--swell-motion-duration-fast) var(--swell-motion-easing), box-shadow var(--swell-motion-duration-base) var(--swell-motion-easing), transform var(--swell-motion-duration-base) var(--swell-motion-easing);display:inline-flex}:host([shape=pill]){border-radius:999px}:host([href]){padding:0}:host a{justify-content:center;align-self:stretch;align-items:center;gap:inherit;padding:0 calc(var(--_swell-button-height) / 2 - 4px);border-radius:inherit;color:inherit;text-decoration:none;display:inline-flex}:host a:focus-visible{outline:var(--swell-focus-width) solid var(--swell-focus-color);outline-offset:calc(var(--swell-focus-offset) + var(--swell-border-width))}:host(:state(outline)) a:focus-visible{outline-offset:calc(var(--swell-focus-offset) + var(--swell-border-strong-width))}:host slot[name=start]::slotted(:is(svg,img)),:host slot[name=end]::slotted(:is(svg,img)){width:calc(var(--_swell-button-font-size) + 4px);height:calc(var(--_swell-button-font-size) + 4px);flex:none}:host slot[name=end]::slotted(*){transition:transform var(--swell-motion-duration-base) var(--swell-motion-easing)}:host .spinner{box-sizing:border-box;width:calc(var(--_swell-button-font-size) + 2px);height:calc(var(--_swell-button-font-size) + 2px);border:2px solid;border-inline-end-color:#0000;border-radius:50%;flex:none;display:none}:host .check{width:calc(var(--_swell-button-font-size) + 6px);height:calc(var(--_swell-button-font-size) + 6px);flex:none;display:none}:host(:state(outline)){border-width:var(--swell-border-strong-width);color:var(--_swell-button-color-accent);box-shadow:none;background:0 0}:host(:state(plain)){color:var(--_swell-button-color-accent);box-shadow:none;background:0 0;border-color:#0000}:host(:hover){transform:translateY(var(--_swell-button-hover-offset))}:host(:state(filled):hover){box-shadow:var(--_swell-button-hover-shadow) var(--_swell-button-color-shadow)}:host(:state(plain):hover:not([aria-disabled=true],[success])){background-color:var(--swell-color-secondary-background)}:host(:active){transform:scale(.98)}:host(:hover:not([aria-expanded],[aria-disabled=true])) slot[name=end]::slotted(*){transform:translate(4px)}:host(:dir(rtl):hover:not([aria-expanded],[aria-disabled=true])) slot[name=end]::slotted(*){transform:translate(-4px)}:host([loading]){cursor:progress;transform:none}:host([loading]) .spinner{animation:swell-button-spin calc(var(--swell-motion-duration-loop) * 2 / 3) linear infinite;display:block}:host([loading]) :is(slot[name=start],slot[name=end]){display:none}:host([href][loading]){cursor:pointer}:host([href]) .spinner{display:none}:host([href][loading]) :is(slot[name=start],slot[name=end]){display:contents}@keyframes swell-button-spin{to{transform:rotate(360deg)}}:host([success]),:host([success]:hover){border-color:var(--swell-color-success);background:var(--swell-color-success);color:var(--swell-color-background);box-shadow:var(--_swell-button-shadow) var(--swell-color-success);cursor:default;transform:none}:host([success]) :is(slot[name=start],slot[name=end],.spinner){display:none}:host([success]) .check{display:block}:host([success]) .check path{stroke-dasharray:26;animation:swell-button-draw var(--swell-motion-duration-slow) var(--swell-motion-easing)}@keyframes swell-button-draw{0%{stroke-dashoffset:26px}}:host(:focus-visible){outline:var(--swell-focus-width) solid var(--swell-focus-color);outline-offset:var(--swell-focus-offset)}:host([aria-disabled=true]:not([success])){cursor:not-allowed;opacity:var(--swell-control-disabled-opacity);box-shadow:none;transform:none}@media (forced-colors:active){:host,:host([success]){color:buttontext;box-shadow:none;background:buttonface;border-color:buttontext}:host .spinner{forced-color-adjust:none}}", c = /* @__PURE__ */ n({ SwellButton: () => f }), l = [
|
|
6
|
+
"href",
|
|
7
|
+
"target",
|
|
8
|
+
"rel",
|
|
9
|
+
"aria-label"
|
|
10
|
+
], u = "<span class=\"spinner\" aria-hidden=\"true\"></span><svg class=\"check\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M20 6 9 17l-5-5\"/></svg><slot name=\"start\"></slot><slot></slot><slot name=\"end\"></slot>", d = [
|
|
11
|
+
[.1, -1],
|
|
12
|
+
[.2, 2],
|
|
13
|
+
[.3, -5],
|
|
14
|
+
[.4, 5],
|
|
15
|
+
[.5, -5],
|
|
16
|
+
[.6, 5],
|
|
17
|
+
[.7, -5],
|
|
18
|
+
[.8, 2],
|
|
19
|
+
[.9, -1]
|
|
20
|
+
].map(([e, t]) => ({
|
|
21
|
+
offset: e,
|
|
22
|
+
transform: `translateX(${t}px)`
|
|
23
|
+
})), f = class extends i {
|
|
24
|
+
static group = "button";
|
|
25
|
+
static appearance = "button";
|
|
26
|
+
static styles = s;
|
|
27
|
+
static template = u;
|
|
28
|
+
static formAssociated = !0;
|
|
29
|
+
static observedAttributes = [
|
|
30
|
+
...i.observedAttributes,
|
|
31
|
+
"disabled",
|
|
32
|
+
"loading",
|
|
33
|
+
"success",
|
|
34
|
+
...l
|
|
35
|
+
];
|
|
36
|
+
#e = !1;
|
|
37
|
+
#t;
|
|
38
|
+
constructor() {
|
|
39
|
+
super(), this.addEventListener("click", this.#o, { capture: !0 }), this.addEventListener("click", this.#s), o(this, () => this.#r);
|
|
40
|
+
}
|
|
41
|
+
get disabled() {
|
|
42
|
+
return this.hasAttribute("disabled");
|
|
43
|
+
}
|
|
44
|
+
set disabled(e) {
|
|
45
|
+
this.toggleAttribute("disabled", !!e);
|
|
46
|
+
}
|
|
47
|
+
get loading() {
|
|
48
|
+
return this.hasAttribute("loading");
|
|
49
|
+
}
|
|
50
|
+
set loading(e) {
|
|
51
|
+
this.toggleAttribute("loading", !!e);
|
|
52
|
+
}
|
|
53
|
+
get success() {
|
|
54
|
+
return this.hasAttribute("success");
|
|
55
|
+
}
|
|
56
|
+
set success(e) {
|
|
57
|
+
this.toggleAttribute("success", !!e);
|
|
58
|
+
}
|
|
59
|
+
get type() {
|
|
60
|
+
let e = this.getAttribute("type");
|
|
61
|
+
return e === "reset" || e === "button" ? e : "submit";
|
|
62
|
+
}
|
|
63
|
+
set type(e) {
|
|
64
|
+
this.setAttribute("type", e);
|
|
65
|
+
}
|
|
66
|
+
shake() {
|
|
67
|
+
this.#t?.cancel();
|
|
68
|
+
let t = getComputedStyle(this), n = e(t.getPropertyValue("--swell-motion-duration-slow"));
|
|
69
|
+
if (n) try {
|
|
70
|
+
this.#t = this.animate(d, {
|
|
71
|
+
duration: n,
|
|
72
|
+
easing: t.getPropertyValue("--swell-motion-easing")
|
|
73
|
+
});
|
|
74
|
+
} catch {}
|
|
75
|
+
}
|
|
76
|
+
connectedCallback() {
|
|
77
|
+
t(this, "disabled"), t(this, "loading"), t(this, "success"), this.#a(), this.#n(), super.connectedCallback();
|
|
78
|
+
}
|
|
79
|
+
formDisabledCallback(e) {
|
|
80
|
+
this.#e = e, this.#i();
|
|
81
|
+
}
|
|
82
|
+
focus(e) {
|
|
83
|
+
let t = this.shadowRoot?.querySelector("a");
|
|
84
|
+
t ? t.focus(e) : super.focus(e);
|
|
85
|
+
}
|
|
86
|
+
update(e) {
|
|
87
|
+
l.includes(e) && this.#a(), (e === "disabled" || e === "success") && this.#i(), (e === "loading" || e === "success") && this.#n();
|
|
88
|
+
}
|
|
89
|
+
#n() {
|
|
90
|
+
this.loading && !this.success && !this.hasAttribute("href") ? this.setAttribute("aria-busy", "true") : this.removeAttribute("aria-busy");
|
|
91
|
+
}
|
|
92
|
+
get #r() {
|
|
93
|
+
return this.disabled || this.#e;
|
|
94
|
+
}
|
|
95
|
+
#i() {
|
|
96
|
+
let e = this.hasAttribute("href");
|
|
97
|
+
!e && (this.#r || this.success) ? this.setAttribute("aria-disabled", "true") : this.removeAttribute("aria-disabled"), a(this, !e && !this.#r);
|
|
98
|
+
}
|
|
99
|
+
#a() {
|
|
100
|
+
let e = this.shadowRoot, t = this.hasAttribute("href"), n = this.getRootNode().activeElement === this;
|
|
101
|
+
!t && !this.hasAttribute("role") ? this.setAttribute("role", "button") : t && this.getAttribute("role") === "button" && this.removeAttribute("role"), this.#i();
|
|
102
|
+
let r = e.querySelector("a");
|
|
103
|
+
if (t) {
|
|
104
|
+
r || (r = this.ownerDocument.createElement("a"), r.append(...e.childNodes), e.append(r));
|
|
105
|
+
for (let e of l) {
|
|
106
|
+
let t = this.getAttribute(e);
|
|
107
|
+
t === null ? r.removeAttribute(e) : r.setAttribute(e, t);
|
|
108
|
+
}
|
|
109
|
+
} else r?.replaceWith(...r.childNodes);
|
|
110
|
+
n && this.focus({ preventScroll: !0 });
|
|
111
|
+
}
|
|
112
|
+
#o = (e) => {
|
|
113
|
+
this.hasAttribute("href") || (this.#r || this.loading || this.success) && (e.preventDefault(), e.stopImmediatePropagation());
|
|
114
|
+
};
|
|
115
|
+
#s = (e) => {
|
|
116
|
+
setTimeout(() => {
|
|
117
|
+
let t = this.internals.form;
|
|
118
|
+
e.defaultPrevented || !t || this.hasAttribute("href") || (this.type === "submit" ? t.requestSubmit() : this.type === "reset" && t.reset());
|
|
119
|
+
});
|
|
120
|
+
};
|
|
121
|
+
};
|
|
122
|
+
r("swell-button", f);
|
|
123
|
+
export { c as n, f as t };
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { r as e, t } from "./define-BlQTa1g4.js";
|
|
2
|
+
import { n } from "./element-B4-_7TLZ.js";
|
|
3
|
+
// src/components/core/card/card.css?inline
|
|
4
|
+
var r = ":host{--_swell-control-font-size:var(--swell-control-font-size);--_swell-card-color-border:var(--swell-card-color-border,var(--swell-color-border));--_swell-card-border-radius:var(--swell-card-border-radius,var(--swell-border-radius));--_swell-card-color-background:var(--swell-card-color-background,var(--swell-color-background))}:host([size=xsmall]){--_swell-control-font-size:var(--swell-control-xsmall-font-size)}:host([size=small]){--_swell-control-font-size:var(--swell-control-small-font-size)}:host([size=large]){--_swell-control-font-size:var(--swell-control-large-font-size)}:host([size=xlarge]){--_swell-control-font-size:var(--swell-control-xlarge-font-size)}:host{box-sizing:border-box;padding:calc(var(--_swell-control-font-size) + 2px);border:var(--swell-border-width) solid var(--_swell-card-color-border);border-radius:var(--_swell-card-border-radius);background:var(--_swell-card-color-background);display:block}:host(:state(filled)){background:var(--swell-color-secondary-background);border:none}@media (forced-colors:active){:host,:host(:state(filled)){border:max(1px, var(--swell-border-width)) solid CanvasText}}", i = /* @__PURE__ */ e({ SwellCard: () => a }), a = class extends n {
|
|
5
|
+
static group = "card";
|
|
6
|
+
static appearance = "card";
|
|
7
|
+
static styles = r;
|
|
8
|
+
};
|
|
9
|
+
t("swell-card", a);
|
|
10
|
+
export { i as n, a as t };
|
|
@@ -0,0 +1,99 @@
|
|
|
1
|
+
import { n as e, r as t, t as n } from "./define-BlQTa1g4.js";
|
|
2
|
+
import { n as r, t as i } from "./description-BHfQ8meK.js";
|
|
3
|
+
import { t as a } from "./element-B4-_7TLZ.js";
|
|
4
|
+
// src/components/core/checkbox/checkbox.css?inline
|
|
5
|
+
var o = "swell-checkbox{--_swell-control-font-size:var(--swell-control-font-size);--_swell-checkbox-border-radius:var(--swell-checkbox-border-radius,3px)}swell-checkbox[size=xsmall]{--_swell-control-font-size:var(--swell-control-xsmall-font-size)}swell-checkbox[size=small]{--_swell-control-font-size:var(--swell-control-small-font-size)}swell-checkbox[size=large]{--_swell-control-font-size:var(--swell-control-large-font-size)}swell-checkbox[size=xlarge]{--_swell-control-font-size:var(--swell-control-xlarge-font-size)}swell-checkbox{--_swell-checkbox-box:calc(var(--_swell-control-font-size) + 2px);--_swell-checkbox-target:max(24px, calc(var(--_swell-checkbox-box) + 8px));--_swell-checkbox-gap:calc(var(--_swell-control-font-size) - 6px - (var(--_swell-checkbox-target) - var(--_swell-checkbox-box)) / 2);gap:var(--swell-field-gap);display:grid}swell-checkbox[hidden]{display:none!important}swell-checkbox [hidden]{display:none}swell-checkbox .swell-checkbox-row{gap:var(--_swell-checkbox-gap);align-items:flex-start;display:flex}swell-checkbox .swell-checkbox-target{width:var(--_swell-checkbox-target);height:var(--_swell-checkbox-target);flex:none;place-items:center;margin-block-start:max(0px, calc(( var(--_swell-control-font-size) * var(--swell-font-leading) - var(--_swell-checkbox-target) ) / 2));display:grid;position:relative}swell-checkbox .swell-checkbox-control{opacity:0;cursor:pointer;width:100%;height:100%;margin:0;position:absolute;inset:0}swell-checkbox .swell-checkbox-box{box-sizing:border-box;width:var(--_swell-checkbox-box);height:var(--_swell-checkbox-box);border:var(--swell-border-width) solid var(--swell-field-color-border);border-radius:var(--_swell-checkbox-border-radius);color:#0000;pointer-events:none;transition:background-color var(--swell-motion-duration-base) var(--swell-motion-easing), border-color var(--swell-motion-duration-base) var(--swell-motion-easing);background:0 0;place-items:center;padding:2px;display:grid}swell-checkbox .swell-checkbox-box svg{opacity:0;width:100%;height:100%;transition:opacity var(--swell-motion-duration-fast) var(--swell-motion-easing), transform var(--swell-motion-duration-base) var(--swell-motion-spring);display:block;transform:scale(.4)}swell-checkbox[invalid] .swell-checkbox-box{border-color:var(--swell-color-danger)}swell-checkbox .swell-checkbox-control:hover+.swell-checkbox-box{border-color:var(--swell-field-hover-color-border)}swell-checkbox .swell-checkbox-control:checked+.swell-checkbox-box{border-color:var(--swell-color-accent);background:var(--swell-color-accent);color:var(--swell-color-background)}swell-checkbox .swell-checkbox-control:checked+.swell-checkbox-box svg{opacity:1;transform:none}swell-checkbox .swell-checkbox-control:focus-visible+.swell-checkbox-box{outline:var(--swell-focus-width) solid var(--swell-focus-color);outline-offset:var(--swell-focus-offset)}swell-checkbox[invalid] .swell-checkbox-control:focus-visible+.swell-checkbox-box{outline-color:var(--swell-color-danger)}swell-checkbox .swell-checkbox-label{padding-top:calc(( var(--_swell-checkbox-target) - var(--_swell-control-font-size) * var(--swell-font-leading) ) / 2);font:var(--swell-font-weight) var(--_swell-control-font-size) / var(--swell-font-leading) var(--swell-font-family);letter-spacing:var(--swell-font-tracking);color:var(--swell-color-foreground);cursor:pointer}swell-checkbox:has(.swell-checkbox-control:disabled) .swell-checkbox-row{opacity:var(--swell-control-disabled-opacity)}swell-checkbox .swell-checkbox-control:disabled,swell-checkbox:has(.swell-checkbox-control:disabled) .swell-checkbox-label{cursor:not-allowed}swell-checkbox .swell-checkbox-hint,swell-checkbox .swell-checkbox-error{font:var(--swell-font-weight) max(12px, calc(var(--_swell-control-font-size) - 1px)) / var(--swell-font-leading) var(--swell-font-family);letter-spacing:var(--swell-font-tracking);color:var(--swell-color-secondary-foreground);padding-inline-start:calc(var(--_swell-checkbox-target) + var(--_swell-checkbox-gap))}swell-checkbox .swell-checkbox-error:not([hidden]){font-weight:var(--swell-font-strong-weight);color:var(--swell-color-danger)}@media (forced-colors:active){swell-checkbox .swell-checkbox-box{border-color:fieldtext}swell-checkbox .swell-checkbox-control:checked+.swell-checkbox-box{color:highlighttext;background:highlight}}", s = /* @__PURE__ */ t({ SwellCheckbox: () => p }), c = ["name", "value"], l = ["disabled", "required"], u = [
|
|
6
|
+
"label",
|
|
7
|
+
"hint",
|
|
8
|
+
"error",
|
|
9
|
+
"invalid",
|
|
10
|
+
"checked"
|
|
11
|
+
], d = "<svg viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m3.5 8.5 3 3 6-7\"/></svg>", f = 0, p = class extends a {
|
|
12
|
+
static labelPosition = !1;
|
|
13
|
+
static styles = o;
|
|
14
|
+
static observedAttributes = [
|
|
15
|
+
...a.observedAttributes,
|
|
16
|
+
...u,
|
|
17
|
+
...c,
|
|
18
|
+
...l
|
|
19
|
+
];
|
|
20
|
+
#e;
|
|
21
|
+
#t;
|
|
22
|
+
#n;
|
|
23
|
+
#r;
|
|
24
|
+
get checked() {
|
|
25
|
+
return this.#e ? this.#e.checked : this.#r ?? this.hasAttribute("checked");
|
|
26
|
+
}
|
|
27
|
+
set checked(e) {
|
|
28
|
+
this.#e ? this.#e.checked = !!e : this.#r = !!e;
|
|
29
|
+
}
|
|
30
|
+
get value() {
|
|
31
|
+
return this.getAttribute("value") ?? "on";
|
|
32
|
+
}
|
|
33
|
+
set value(e) {
|
|
34
|
+
this.setAttribute("value", e);
|
|
35
|
+
}
|
|
36
|
+
get disabled() {
|
|
37
|
+
return this.hasAttribute("disabled");
|
|
38
|
+
}
|
|
39
|
+
set disabled(e) {
|
|
40
|
+
this.toggleAttribute("disabled", !!e);
|
|
41
|
+
}
|
|
42
|
+
get required() {
|
|
43
|
+
return this.hasAttribute("required");
|
|
44
|
+
}
|
|
45
|
+
set required(e) {
|
|
46
|
+
this.toggleAttribute("required", !!e);
|
|
47
|
+
}
|
|
48
|
+
get invalid() {
|
|
49
|
+
return this.hasAttribute("invalid");
|
|
50
|
+
}
|
|
51
|
+
set invalid(e) {
|
|
52
|
+
this.toggleAttribute("invalid", !!e);
|
|
53
|
+
}
|
|
54
|
+
get name() {
|
|
55
|
+
return this.getAttribute("name") ?? "";
|
|
56
|
+
}
|
|
57
|
+
set name(e) {
|
|
58
|
+
this.setAttribute("name", e);
|
|
59
|
+
}
|
|
60
|
+
focus(e) {
|
|
61
|
+
this.#e?.focus(e);
|
|
62
|
+
}
|
|
63
|
+
connectedCallback() {
|
|
64
|
+
for (let t of [
|
|
65
|
+
"checked",
|
|
66
|
+
"value",
|
|
67
|
+
"disabled",
|
|
68
|
+
"required",
|
|
69
|
+
"invalid",
|
|
70
|
+
"name"
|
|
71
|
+
]) e(this, t);
|
|
72
|
+
super.connectedCallback();
|
|
73
|
+
}
|
|
74
|
+
render() {
|
|
75
|
+
let e = this.querySelector(".swell-checkbox-control");
|
|
76
|
+
e && e.checked !== e.defaultChecked && (this.#r ??= e.checked);
|
|
77
|
+
let t = `swell-checkbox-${++f}`, n = document.createElement("div");
|
|
78
|
+
n.className = "swell-checkbox-row";
|
|
79
|
+
let r = document.createElement("span");
|
|
80
|
+
r.className = "swell-checkbox-target", this.#e = document.createElement("input"), this.#e.type = "checkbox", this.#e.className = "swell-checkbox-control", this.#e.id = t;
|
|
81
|
+
let a = document.createElement("span");
|
|
82
|
+
a.className = "swell-checkbox-box", a.setAttribute("aria-hidden", "true"), a.innerHTML = d, this.#t = document.createElement("label"), this.#t.className = "swell-checkbox-label", this.#t.htmlFor = t, this.#n = i("swell-checkbox", t), r.append(this.#e, a), n.append(r, this.#t), this.replaceChildren(n, this.#n.hint, this.#n.error);
|
|
83
|
+
for (let e of [
|
|
84
|
+
...u,
|
|
85
|
+
...c,
|
|
86
|
+
...l
|
|
87
|
+
]) this.#i(e);
|
|
88
|
+
this.#r !== void 0 && (this.#e.checked = this.#r, this.#r = void 0);
|
|
89
|
+
}
|
|
90
|
+
update(e) {
|
|
91
|
+
this.#e && this.#i(e);
|
|
92
|
+
}
|
|
93
|
+
#i(e) {
|
|
94
|
+
let t = this.#e, n = this.getAttribute(e);
|
|
95
|
+
l.includes(e) ? t.toggleAttribute(e, n !== null) : c.includes(e) ? n === null ? t.removeAttribute(e) : t.setAttribute(e, n) : e === "checked" ? t.defaultChecked = n !== null : e === "label" ? this.#t.textContent = n ?? "" : r(this, t, this.#n);
|
|
96
|
+
}
|
|
97
|
+
};
|
|
98
|
+
n("swell-checkbox", p);
|
|
99
|
+
export { s as n, p as t };
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
import { n as e, r as t, t as n } from "./define-BlQTa1g4.js";
|
|
2
|
+
import { n as r } from "./element-B4-_7TLZ.js";
|
|
3
|
+
// src/components/core/chip/chip.css?inline
|
|
4
|
+
var i = ":host{--_swell-chip-font-size:var(--swell-chip-font-size,var(--swell-font-caption-size));--_swell-chip-height:var(--swell-chip-height,32px);--_swell-chip-color-border:var(--swell-chip-color-border,var(--swell-color-border));--_swell-chip-font-weight:var(--swell-chip-font-weight,var(--swell-font-bold-weight));--_swell-chip-font-tracking:var(--swell-chip-font-tracking,.03em);--_swell-chip-color-background:var(--swell-chip-color-background,var(--swell-color-background));--_swell-chip-color-foreground:var(--swell-chip-color-foreground,var(--swell-color-foreground));--_swell-chip-color-accent:var(--swell-chip-color-accent,var(--swell-color-secondary-foreground))}:host([size=xsmall]){--_swell-chip-font-size:var(--swell-chip-xsmall-font-size,11px);--_swell-chip-height:var(--swell-chip-xsmall-height,24px)}:host([size=small]){--_swell-chip-font-size:var(--swell-chip-small-font-size,12px);--_swell-chip-height:var(--swell-chip-small-height,28px)}:host([size=large]){--_swell-chip-font-size:var(--swell-chip-large-font-size,14px);--_swell-chip-height:var(--swell-chip-large-height,36px)}:host([size=xlarge]){--_swell-chip-font-size:var(--swell-chip-xlarge-font-size,16px);--_swell-chip-height:var(--swell-chip-xlarge-height,40px)}:host{align-items:center;gap:calc(var(--_swell-chip-font-size) - 7px);box-sizing:border-box;height:var(--_swell-chip-height);padding-inline:calc(var(--_swell-chip-height) / 2 - 4px) 0;border:var(--swell-border-width) solid var(--_swell-chip-color-border);font:var(--_swell-chip-font-weight) var(--_swell-chip-font-size) / 1 var(--swell-font-family);letter-spacing:var(--_swell-chip-font-tracking);white-space:nowrap;background:var(--_swell-chip-color-background);color:var(--_swell-chip-color-foreground);animation:swell-chip-pop var(--swell-motion-duration-slow) var(--swell-motion-spring);border-radius:999px;display:inline-flex}@keyframes swell-chip-pop{0%{opacity:0;transform:scale(.55)}60%{opacity:1;transform:scale(1.12)}}:host slot[name=start]::slotted(svg){width:calc(var(--_swell-chip-font-size) + 2px);height:calc(var(--_swell-chip-font-size) + 2px);flex:none}:host slot[name=start]::slotted([hidden]){display:none}:host [part=remove]{width:max(24px, var(--_swell-chip-height));height:max(24px, var(--_swell-chip-height));margin-block:calc(-1 * var(--swell-border-width));color:var(--_swell-chip-color-accent);cursor:pointer;background:0 0;border:0;border-radius:50%;flex:none;place-items:center;margin-inline-end:calc(-1 * var(--swell-border-width));padding:0;display:grid}:host [part=remove] svg{width:calc(var(--_swell-chip-font-size) + 2px);height:calc(var(--_swell-chip-font-size) + 2px)}:host [part=remove]:disabled{cursor:not-allowed;opacity:var(--swell-control-disabled-opacity)}:host [part=remove]:focus-visible{outline:var(--swell-focus-width) solid var(--swell-focus-color);outline-offset:var(--swell-focus-offset)}@media (forced-colors:active){:host{border-color:canvastext}:host [part=remove]{color:buttontext}}", a = /* @__PURE__ */ t({ SwellChip: () => s }), o = "<slot name=\"start\"></slot><slot></slot><button type=\"button\" part=\"remove\" tabindex=\"0\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.75\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M18 6 6 18\"/><path d=\"m6 6 12 12\"/></svg></button>", s = class extends r {
|
|
5
|
+
static styles = i;
|
|
6
|
+
static template = o;
|
|
7
|
+
static formAssociated = !0;
|
|
8
|
+
static observedAttributes = [
|
|
9
|
+
...r.observedAttributes,
|
|
10
|
+
"disabled",
|
|
11
|
+
"remove-label"
|
|
12
|
+
];
|
|
13
|
+
constructor() {
|
|
14
|
+
super(), this.#e.addEventListener("click", (e) => {
|
|
15
|
+
e.detail <= 1 && !this.matches(":disabled") && this.dispatchEvent(new Event("remove", { bubbles: !0 }));
|
|
16
|
+
});
|
|
17
|
+
}
|
|
18
|
+
get disabled() {
|
|
19
|
+
return this.hasAttribute("disabled");
|
|
20
|
+
}
|
|
21
|
+
set disabled(e) {
|
|
22
|
+
this.toggleAttribute("disabled", !!e);
|
|
23
|
+
}
|
|
24
|
+
connectedCallback() {
|
|
25
|
+
e(this, "disabled"), super.connectedCallback();
|
|
26
|
+
}
|
|
27
|
+
formDisabledCallback() {
|
|
28
|
+
this.#t();
|
|
29
|
+
}
|
|
30
|
+
focus(e) {
|
|
31
|
+
this.#e.focus(e);
|
|
32
|
+
}
|
|
33
|
+
get #e() {
|
|
34
|
+
return this.shadowRoot?.querySelector("[part=\"remove\"]");
|
|
35
|
+
}
|
|
36
|
+
update(e) {
|
|
37
|
+
e === "remove-label" && this.#n(), e === "disabled" && this.#t();
|
|
38
|
+
}
|
|
39
|
+
#t() {
|
|
40
|
+
this.#e.disabled = this.matches(":disabled");
|
|
41
|
+
}
|
|
42
|
+
#n() {
|
|
43
|
+
let e = this.getAttribute("remove-label");
|
|
44
|
+
e ? this.#e.setAttribute("aria-label", e) : this.#e.removeAttribute("aria-label");
|
|
45
|
+
}
|
|
46
|
+
};
|
|
47
|
+
n("swell-chip", s);
|
|
48
|
+
export { a as n, s as t };
|