tyrell-components 1.0.0-TC18 → 1.0.0-TC22
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/css/tyrell-brand.css +767 -0
- package/css/tyrell.css +64 -168
- package/dist/tyrell-brand.css +767 -0
- package/dist/tyrell.css +64 -168
- package/dist/tyrell.js +1 -1
- package/lib/components/modal.d.ts +24 -4
- package/lib/components/modal.d.ts.map +1 -1
- package/lib/components/modal.js +29 -15
- package/lib/components/modal.js.map +1 -1
- package/lib/components/tooltip.js +1 -1
- package/lib/styles/calendar-month.d.ts +1 -1
- package/lib/styles/calendar-month.js +3 -3
- package/lib/styles/checkbox.d.ts +1 -1
- package/lib/styles/checkbox.d.ts.map +1 -1
- package/lib/styles/custom-scrollbar.d.ts +1 -1
- package/lib/styles/custom-scrollbar.d.ts.map +1 -1
- package/lib/styles/custom-scrollbar.js +8 -8
- package/lib/styles/date-picker.d.ts +1 -1
- package/lib/styles/date-picker.d.ts.map +1 -1
- package/lib/styles/date-picker.js +16 -16
- package/lib/styles/dropdown.d.ts +1 -1
- package/lib/styles/dropdown.d.ts.map +1 -1
- package/lib/styles/dropdown.js +7 -7
- package/lib/styles/input.d.ts +1 -1
- package/lib/styles/input.d.ts.map +1 -1
- package/lib/styles/input.js +16 -16
- package/lib/styles/multiselect.d.ts +1 -1
- package/lib/styles/multiselect.d.ts.map +1 -1
- package/lib/styles/multiselect.js +1 -1
- package/lib/styles/option.d.ts +1 -1
- package/lib/styles/option.js +1 -1
- package/lib/styles/radio.d.ts +1 -1
- package/lib/styles/radio.d.ts.map +1 -1
- package/lib/styles/scroll-container.d.ts +1 -1
- package/lib/styles/scroll-container.d.ts.map +1 -1
- package/lib/styles/scroll-container.js +10 -10
- package/lib/styles/step.d.ts +1 -1
- package/lib/styles/step.d.ts.map +1 -1
- package/lib/styles/switch.d.ts +1 -1
- package/lib/styles/switch.d.ts.map +1 -1
- package/lib/styles/tab.d.ts +1 -1
- package/lib/styles/tab.d.ts.map +1 -1
- package/lib/styles/tag.d.ts +1 -1
- package/lib/styles/tag.d.ts.map +1 -1
- package/lib/styles/tag.js +15 -15
- package/lib/styles/textarea.d.ts +1 -1
- package/lib/styles/textarea.js +1 -1
- package/lib/styles/tooltip.d.ts.map +1 -1
- package/lib/styles/tooltip.js +12 -15
- package/lib/styles/tooltip.js.map +1 -1
- package/lib/styles/wizard.d.ts +12 -7
- package/lib/styles/wizard.d.ts.map +1 -1
- package/lib/styles/wizard.js +46 -74
- package/lib/styles/wizard.js.map +1 -1
- package/lib/version.d.ts +1 -1
- package/lib/version.js +1 -1
- package/package.json +3 -3
package/lib/styles/tag.d.ts
CHANGED
|
@@ -2,5 +2,5 @@
|
|
|
2
2
|
* Tag Component Styles
|
|
3
3
|
* PORTED FROM: clj/ty/components/tag.css
|
|
4
4
|
*/
|
|
5
|
-
export declare const tagStyles = "\n/* Tag Component Styles using centralized ty.variables.css */\n\n/* Host element */\n\n/* Hidden attribute support */\n:host([hidden]) {\n display: none !important;\n}\n\n/* Main container */\n.tag-container {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: var(--ty-spacing-1);\n /* Default pill shape - can be overridden */\n border-radius: var(--ty-radius-full);\n font-weight: var(--ty-font-medium);\n text-align: center;\n white-space: nowrap;\n user-select: none;\n box-sizing: border-box;\n\n /* Default MD size \u2014 anchor at 28px, even +4 steps for other sizes */\n padding: 0 0.625rem; /* 0 10px */\n font-size: var(--ty-font-xs); /* 14px */\n line-height: var(--ty-leading-xs); /* 21px */\n letter-spacing: var(--ty-tracking-xs); /* -0.013em */\n min-height: 28px;\n\n /* Transitions using centralized values */\n transition: var(--ty-transition-all);\n\n /* Colors via custom properties \u2014 override on :host for full control */\n background: var(--tag-bg, transparent);\n color: var(--tag-color, var(--ty-text));\n border: 1px solid;\n border-color: var(--tag-border-color, var(--ty-border));\n}\n\n/* Non-pill variant - rectangular with rounded corners */\n:host([pill=\"false\"]) .tag-container,\n:host([not-pill]) .tag-container {\n border-radius: var(--ty-radius-md);\n /* 6px instead of full pill */\n}\n\n/* Tags with value attribute but NOT selected should be clickable */\n:host([value]:not([selected])) .tag-container:not([aria-disabled=\"true\"]) {\n cursor: pointer;\n}\n\n:host([selected]) .tag-container:not([aria-disabled=\"true\"]) {\n cursor: initial;\n}\n\n.tag-container[tabindex]:not([aria-disabled=\"true\"]):hover {\n background: var(--ty-bg-neutral-soft);\n transform: translateY(-1px);\n box-shadow: var(--ty-shadow-sm);\n}\n\n.tag-container[tabindex]:not([aria-disabled=\"true\"]):active {\n transform: translateY(0);\n box-shadow: var(--ty-shadow-sm);\n}\n\n.tag-container[tabindex]:focus {\n outline: none;\n}\n\n/* Disabled state */\n.tag-container[aria-disabled=\"true\"] {\n opacity: 0.6;\n cursor: not-allowed;\n pointer-events: none;\n}\n\n/* Slot containers */\n.tag-start,\n.tag-content,\n.tag-end {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n}\n\n.tag-content {\n flex: 1;\n min-width: 0;\n}\n\n/* Dismiss button */\n.tag-dismiss {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n padding: 0;\n background: none;\n border: none;\n color: currentColor;\n cursor: pointer;\n border-radius: var(--ty-radius-full);\n transition: var(--ty-transition-all);\n opacity: 0.7;\n flex-shrink: 0;\n /* Default MD dismiss button size */\n width: var(--ty-spacing-4);\n /* 16px */\n height: var(--ty-spacing-4);\n}\n\n.tag-dismiss:hover {\n opacity: 1;\n background: rgba(0, 0, 0, 0.1);\n}\n\n.tag-dismiss svg {\n width: 100%;\n height: 100%;\n}\n\n/* Size variants - override defaults */\n:host([size=\"xs\"]) .tag-container {\n padding: 0 0.375rem; /* 0 6px */\n font-size: var(--ty-font-xs); /* 12px */\n line-height: var(--ty-leading-xs);\n letter-spacing: var(--ty-tracking-xs);\n min-height: 20px;\n}\n\n:host([size=\"xs\"]) .tag-dismiss {\n width: var(--ty-spacing-3);\n height: var(--ty-spacing-3);\n margin-left: var(--ty-spacing-2);\n}\n\n:host([size=\"sm\"]) .tag-container {\n padding: 0 var(--ty-spacing-2); /* 0 8px */\n font-size: var(--ty-font-xs); /* 12px */\n line-height: var(--ty-leading-xs);\n letter-spacing: var(--ty-tracking-xs);\n min-height: 24px;\n}\n\n:host([size=\"sm\"]) .tag-dismiss {\n width: var(--ty-spacing-3);\n height: var(--ty-spacing-3);\n margin-left: var(--ty-spacing-2);\n}\n\n/* MD is now the default - no need for explicit [size=\"md\"] selector */\n/* All default styles above apply to MD size (min-height: 24px) */\n\n:host([size=\"lg\"]) .tag-container {\n padding: 0 var(--ty-spacing-3); /* 0 12px */\n font-size: var(--ty-font-sm); /* 14px */\n line-height: var(--ty-leading-sm); /* 21px */\n letter-spacing: var(--ty-tracking-sm); /* -0.013em */\n min-height: 32px;\n}\n\n:host([size=\"lg\"]) .tag-dismiss {\n width: var(--ty-spacing-5);\n height: var(--ty-spacing-5);\n margin-left: var(--ty-spacing-4);\n}\n\n:host([size=\"xl\"]) .tag-container {\n padding: 0 0.875rem; /* 0 14px */\n font-size: var(--ty-font-sm); /* 14px */\n line-height: var(--ty-leading-sm); /* 21px */\n letter-spacing: var(--ty-tracking-sm); /* -0.013em */\n min-height: 36px;\n}\n\n:host([size=\"xl\"]) .tag-dismiss {\n width: var(--ty-spacing-5);\n height: var(--ty-spacing-5);\n margin-left: var(--ty-spacing-4);\n}\n\n/* ===== FLAVOR VARIANTS =====\n Each flavor sets --tag-bg / --tag-color / --tag-border-color on :host.\n Append '+' to flavor for a stronger shade (mild background, strong color),\n or '-' for a softer shade (soft background, base color). */\n\n/* ----- PRIMARY ----- */\n:host([flavor=\"primary\"]) {\n --tag-bg: var(--ty-bg-primary);\n --tag-color: var(--ty-color-primary-strong);\n --tag-border-color: var(--ty-border-primary);\n}\n:host([flavor=\"primary+\"]) {\n --tag-bg: var(--ty-bg-primary-mild);\n --tag-color: var(--ty-color-primary-strong);\n --tag-border-color: var(--ty-color-primary);\n}\n:host([flavor=\"primary-\"]) {\n --tag-bg: var(--ty-bg-primary-soft);\n --tag-color: var(--ty-color-primary);\n --tag-border-color: var(--ty-border-primary);\n}\n:host([flavor=\"primary\"]) .tag-container[tabindex]:hover,\n:host([flavor=\"primary+\"]) .tag-container[tabindex]:hover,\n:host([flavor=\"primary-\"]) .tag-container[tabindex]:hover {\n background: var(--ty-bg-primary-mild);\n}\n:host([flavor=\"primary\"]) .tag-container[tabindex]:focus,\n:host([flavor=\"primary+\"]) .tag-container[tabindex]:focus,\n:host([flavor=\"primary-\"]) .tag-container[tabindex]:focus {\n box-shadow: 0 0 0 3px var(--ty-color-primary-faint);\n}\n\n/* ----- SECONDARY ----- */\n:host([flavor=\"secondary\"]) {\n --tag-bg: var(--ty-bg-secondary);\n --tag-color: var(--ty-color-secondary-strong);\n --tag-border-color: var(--ty-border-secondary);\n}\n:host([flavor=\"secondary+\"]) {\n --tag-bg: var(--ty-bg-secondary-mild);\n --tag-color: var(--ty-color-secondary-strong);\n --tag-border-color: var(--ty-color-secondary);\n}\n:host([flavor=\"secondary-\"]) {\n --tag-bg: var(--ty-bg-secondary-soft);\n --tag-color: var(--ty-color-secondary);\n --tag-border-color: var(--ty-border-secondary);\n}\n:host([flavor=\"secondary\"]) .tag-container[tabindex]:hover,\n:host([flavor=\"secondary+\"]) .tag-container[tabindex]:hover,\n:host([flavor=\"secondary-\"]) .tag-container[tabindex]:hover {\n background: var(--ty-bg-secondary-mild);\n}\n:host([flavor=\"secondary\"]) .tag-container[tabindex]:focus,\n:host([flavor=\"secondary+\"]) .tag-container[tabindex]:focus,\n:host([flavor=\"secondary-\"]) .tag-container[tabindex]:focus {\n box-shadow: 0 0 0 3px var(--ty-color-secondary-faint);\n}\n\n/* ----- SUCCESS ----- */\n:host([flavor=\"success\"]) {\n --tag-bg: var(--ty-bg-success);\n --tag-color: var(--ty-color-success-strong);\n --tag-border-color: var(--ty-border-success);\n}\n:host([flavor=\"success+\"]) {\n --tag-bg: var(--ty-bg-success-mild);\n --tag-color: var(--ty-color-success-strong);\n --tag-border-color: var(--ty-color-success);\n}\n:host([flavor=\"success-\"]) {\n --tag-bg: var(--ty-bg-success-soft);\n --tag-color: var(--ty-color-success);\n --tag-border-color: var(--ty-border-success);\n}\n:host([flavor=\"success\"]) .tag-container[tabindex]:hover,\n:host([flavor=\"success+\"]) .tag-container[tabindex]:hover,\n:host([flavor=\"success-\"]) .tag-container[tabindex]:hover {\n background: var(--ty-bg-success-mild);\n}\n:host([flavor=\"success\"]) .tag-container[tabindex]:focus,\n:host([flavor=\"success+\"]) .tag-container[tabindex]:focus,\n:host([flavor=\"success-\"]) .tag-container[tabindex]:focus {\n box-shadow: 0 0 0 3px var(--ty-color-success-faint);\n}\n\n/* ----- DANGER ----- */\n:host([flavor=\"danger\"]) {\n --tag-bg: var(--ty-bg-danger);\n --tag-color: var(--ty-color-danger-strong);\n --tag-border-color: var(--ty-border-danger);\n}\n:host([flavor=\"danger+\"]) {\n --tag-bg: var(--ty-bg-danger-mild);\n --tag-color: var(--ty-color-danger-strong);\n --tag-border-color: var(--ty-color-danger);\n}\n:host([flavor=\"danger-\"]) {\n --tag-bg: var(--ty-bg-danger-soft);\n --tag-color: var(--ty-color-danger);\n --tag-border-color: var(--ty-border-danger);\n}\n:host([flavor=\"danger\"]) .tag-container[tabindex]:hover,\n:host([flavor=\"danger+\"]) .tag-container[tabindex]:hover,\n:host([flavor=\"danger-\"]) .tag-container[tabindex]:hover {\n background: var(--ty-bg-danger-mild);\n}\n:host([flavor=\"danger\"]) .tag-container[tabindex]:focus,\n:host([flavor=\"danger+\"]) .tag-container[tabindex]:focus,\n:host([flavor=\"danger-\"]) .tag-container[tabindex]:focus {\n box-shadow: 0 0 0 3px var(--ty-color-danger-faint);\n}\n\n/* ----- WARNING ----- */\n:host([flavor=\"warning\"]) {\n --tag-bg: var(--ty-bg-warning);\n --tag-color: var(--ty-color-warning-strong);\n --tag-border-color: var(--ty-border-warning);\n}\n:host([flavor=\"warning+\"]) {\n --tag-bg: var(--ty-bg-warning-mild);\n --tag-color: var(--ty-color-warning-strong);\n --tag-border-color: var(--ty-color-warning);\n}\n:host([flavor=\"warning-\"]) {\n --tag-bg: var(--ty-bg-warning-soft);\n --tag-color: var(--ty-color-warning);\n --tag-border-color: var(--ty-border-warning);\n}\n:host([flavor=\"warning\"]) .tag-container[tabindex]:hover,\n:host([flavor=\"warning+\"]) .tag-container[tabindex]:hover,\n:host([flavor=\"warning-\"]) .tag-container[tabindex]:hover {\n background: var(--ty-bg-warning-mild);\n}\n:host([flavor=\"warning\"]) .tag-container[tabindex]:focus,\n:host([flavor=\"warning+\"]) .tag-container[tabindex]:focus,\n:host([flavor=\"warning-\"]) .tag-container[tabindex]:focus {\n box-shadow: 0 0 0 3px var(--ty-color-warning-faint);\n}\n\n:host([flavor=\"info\"]) .tag-container[tabindex]:focus {\n box-shadow: 0 0 0 3px var(--ty-color-info-faint);\n}\n\n/* ----- NEUTRAL ----- */\n:host([flavor=\"neutral\"]) {\n --tag-color: var(--ty-text-mild);\n --tag-bg: var(--ty-bg-neutral-soft);\n --tag-border-color: var(--ty-border-mild);\n}\n\n:host([flavor=\"neutral+\"]) {\n --tag-bg: var(--ty-bg-neutral-mild);\n --tag-color: var(--ty-text-mild);\n --tag-border-color: var(--ty-border-strong);\n}\n:host([flavor=\"neutral-\"]) {\n --tag-bg: var(--ty-bg-neutral-soft);\n --tag-color: var(--ty-text-soft);\n --tag-border-color: var(--ty-border-mildstrong);\n}\n:host([flavor=\"neutral\"]) .tag-container[tabindex]:hover,\n:host([flavor=\"neutral+\"]) .tag-container[tabindex]:hover,\n:host([flavor=\"neutral-\"]) .tag-container[tabindex]:hover {\n background: var(--ty-bg-neutral-soft);\n}\n:host([flavor=\"neutral\"]) .tag-container[tabindex]:focus,\n:host([flavor=\"neutral+\"]) .tag-container[tabindex]:focus,\n:host([flavor=\"neutral-\"]) .tag-container[tabindex]:focus {\n box-shadow: 0 0 0 3px var(--ty-border-soft);\n}\n\n/* Slotted content styling */\n.tag-start ::slotted(*),\n.tag-content ::slotted(*),\n.tag-end ::slotted(*) {\n display: flex;\n align-items: center;\n}\n\n/* Icon sizing for slotted icons */\n.tag-start ::slotted(ty-icon),\n.tag-end ::slotted(ty-icon) {\n width: 1em;\n height: 1em;\n flex-shrink: 0;\n}\n\n/* Count/badge styling using centralized spacing */\n.tag-end ::slotted(.count) {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-width: var(--ty-spacing-6);\n /* 24px */\n height: var(--ty-spacing-5);\n /* 20px */\n padding: 0 var(--ty-spacing-2);\n /* 0 8px */\n background: rgba(0, 0, 0, 0.1);\n border-radius: var(--ty-radius-full);\n font-size: var(--ty-font-xs);\n font-weight: var(--ty-font-semibold);\n line-height: var(--ty-line-height-none);\n flex-shrink: 0;\n}\n\n/* Special handling for long text content */\n.tag-content {\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n:host([data-type=\"user\"]) .tag-container {\n min-width: var(--ty-spacing-20);\n /* 80px for user tags */\n}\n\n/* Dark mode is handled automatically by the centralized variables */\n";
|
|
5
|
+
export declare const tagStyles = "\n/* Tag Component Styles using centralized ty.variables.css */\n\n/* Host element */\n\n/* Hidden attribute support */\n:host([hidden]) {\n display: none !important;\n}\n\n/* Main container */\n.tag-container {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: var(--ty-spacing-1);\n /* Default pill shape - can be overridden */\n border-radius: var(--ty-radius-full);\n font-weight: var(--ty-font-medium);\n text-align: center;\n white-space: nowrap;\n user-select: none;\n box-sizing: border-box;\n\n /* Default MD size \u2014 anchor at 28px, even +4 steps for other sizes */\n padding: 0 0.625rem; /* 0 10px */\n font-size: var(--ty-font-xs); /* 14px */\n line-height: var(--ty-leading-xs); /* 21px */\n letter-spacing: var(--ty-tracking-xs); /* -0.013em */\n min-height: 28px;\n\n /* Transitions using centralized values */\n transition: var(--ty-transition-all);\n\n /* Colors via custom properties \u2014 override on :host for full control */\n background: var(--tag-bg, transparent);\n color: var(--tag-color, var(--ty-text));\n border: 1px solid;\n border-color: var(--tag-border-color, var(--ty-border));\n}\n\n/* Non-pill variant - rectangular with rounded corners */\n:host([pill=\"false\"]) .tag-container,\n:host([not-pill]) .tag-container {\n border-radius: var(--ty-radius-md);\n /* 6px instead of full pill */\n}\n\n/* Tags with value attribute but NOT selected should be clickable */\n:host([value]:not([selected])) .tag-container:not([aria-disabled=\"true\"]) {\n cursor: pointer;\n}\n\n:host([selected]) .tag-container:not([aria-disabled=\"true\"]) {\n cursor: initial;\n}\n\n.tag-container[tabindex]:not([aria-disabled=\"true\"]):hover {\n background: var(--ty-bg-neutral-soft);\n transform: translateY(-1px);\n box-shadow: var(--ty-shadow-sm);\n}\n\n.tag-container[tabindex]:not([aria-disabled=\"true\"]):active {\n transform: translateY(0);\n box-shadow: var(--ty-shadow-sm);\n}\n\n.tag-container[tabindex]:focus {\n outline: none;\n}\n\n/* Disabled state */\n.tag-container[aria-disabled=\"true\"] {\n opacity: 0.6;\n cursor: not-allowed;\n pointer-events: none;\n}\n\n/* Slot containers */\n.tag-start,\n.tag-content,\n.tag-end {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n}\n\n.tag-content {\n flex: 1;\n min-width: 0;\n}\n\n/* Dismiss button */\n.tag-dismiss {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n padding: 0;\n background: none;\n border: none;\n color: currentColor;\n cursor: pointer;\n border-radius: var(--ty-radius-full);\n transition: var(--ty-transition-all);\n opacity: 0.7;\n flex-shrink: 0;\n /* Default MD dismiss button size */\n width: var(--ty-spacing-4);\n /* 16px */\n height: var(--ty-spacing-4);\n}\n\n.tag-dismiss:hover {\n opacity: 1;\n background: rgba(0, 0, 0, 0.1);\n}\n\n.tag-dismiss svg {\n width: 100%;\n height: 100%;\n}\n\n/* Size variants - override defaults */\n:host([size=\"xs\"]) .tag-container {\n padding: 0 0.375rem; /* 0 6px */\n font-size: var(--ty-font-xs); /* 12px */\n line-height: var(--ty-leading-xs);\n letter-spacing: var(--ty-tracking-xs);\n min-height: 20px;\n}\n\n:host([size=\"xs\"]) .tag-dismiss {\n width: var(--ty-spacing-3);\n height: var(--ty-spacing-3);\n margin-left: var(--ty-spacing-2);\n}\n\n:host([size=\"sm\"]) .tag-container {\n padding: 0 var(--ty-spacing-2); /* 0 8px */\n font-size: var(--ty-font-xs); /* 12px */\n line-height: var(--ty-leading-xs);\n letter-spacing: var(--ty-tracking-xs);\n min-height: 24px;\n}\n\n:host([size=\"sm\"]) .tag-dismiss {\n width: var(--ty-spacing-3);\n height: var(--ty-spacing-3);\n margin-left: var(--ty-spacing-2);\n}\n\n/* MD is now the default - no need for explicit [size=\"md\"] selector */\n/* All default styles above apply to MD size (min-height: 24px) */\n\n:host([size=\"lg\"]) .tag-container {\n padding: 0 var(--ty-spacing-3); /* 0 12px */\n font-size: var(--ty-font-sm); /* 14px */\n line-height: var(--ty-leading-sm); /* 21px */\n letter-spacing: var(--ty-tracking-sm); /* -0.013em */\n min-height: 32px;\n}\n\n:host([size=\"lg\"]) .tag-dismiss {\n width: var(--ty-spacing-5);\n height: var(--ty-spacing-5);\n margin-left: var(--ty-spacing-4);\n}\n\n:host([size=\"xl\"]) .tag-container {\n padding: 0 0.875rem; /* 0 14px */\n font-size: var(--ty-font-sm); /* 14px */\n line-height: var(--ty-leading-sm); /* 21px */\n letter-spacing: var(--ty-tracking-sm); /* -0.013em */\n min-height: 36px;\n}\n\n:host([size=\"xl\"]) .tag-dismiss {\n width: var(--ty-spacing-5);\n height: var(--ty-spacing-5);\n margin-left: var(--ty-spacing-4);\n}\n\n/* ===== FLAVOR VARIANTS =====\n Each flavor sets --tag-bg / --tag-color / --tag-border-color on :host.\n Append '+' to flavor for a stronger shade (mild background, strong color),\n or '-' for a softer shade (soft background, base color). */\n\n/* ----- PRIMARY ----- */\n:host([flavor=\"primary\"]) {\n --tag-bg: var(--ty-bg-primary);\n --tag-color: var(--ty-color-primary-strong);\n --tag-border-color: var(--ty-border-primary);\n}\n:host([flavor=\"primary+\"]) {\n --tag-bg: var(--ty-bg-primary-bold);\n --tag-color: var(--ty-color-primary-strong);\n --tag-border-color: var(--ty-color-primary);\n}\n:host([flavor=\"primary-\"]) {\n --tag-bg: var(--ty-bg-primary-soft);\n --tag-color: var(--ty-color-primary);\n --tag-border-color: var(--ty-border-primary);\n}\n:host([flavor=\"primary\"]) .tag-container[tabindex]:hover,\n:host([flavor=\"primary+\"]) .tag-container[tabindex]:hover,\n:host([flavor=\"primary-\"]) .tag-container[tabindex]:hover {\n background: var(--ty-bg-primary-bold);\n}\n:host([flavor=\"primary\"]) .tag-container[tabindex]:focus,\n:host([flavor=\"primary+\"]) .tag-container[tabindex]:focus,\n:host([flavor=\"primary-\"]) .tag-container[tabindex]:focus {\n box-shadow: 0 0 0 3px var(--ty-color-primary-faint);\n}\n\n/* ----- SECONDARY ----- */\n:host([flavor=\"secondary\"]) {\n --tag-bg: var(--ty-bg-secondary);\n --tag-color: var(--ty-color-secondary-strong);\n --tag-border-color: var(--ty-border-secondary);\n}\n:host([flavor=\"secondary+\"]) {\n --tag-bg: var(--ty-bg-secondary-bold);\n --tag-color: var(--ty-color-secondary-strong);\n --tag-border-color: var(--ty-color-secondary);\n}\n:host([flavor=\"secondary-\"]) {\n --tag-bg: var(--ty-bg-secondary-soft);\n --tag-color: var(--ty-color-secondary);\n --tag-border-color: var(--ty-border-secondary);\n}\n:host([flavor=\"secondary\"]) .tag-container[tabindex]:hover,\n:host([flavor=\"secondary+\"]) .tag-container[tabindex]:hover,\n:host([flavor=\"secondary-\"]) .tag-container[tabindex]:hover {\n background: var(--ty-bg-secondary-bold);\n}\n:host([flavor=\"secondary\"]) .tag-container[tabindex]:focus,\n:host([flavor=\"secondary+\"]) .tag-container[tabindex]:focus,\n:host([flavor=\"secondary-\"]) .tag-container[tabindex]:focus {\n box-shadow: 0 0 0 3px var(--ty-color-secondary-faint);\n}\n\n/* ----- SUCCESS ----- */\n:host([flavor=\"success\"]) {\n --tag-bg: var(--ty-bg-success);\n --tag-color: var(--ty-color-success-strong);\n --tag-border-color: var(--ty-border-success);\n}\n:host([flavor=\"success+\"]) {\n --tag-bg: var(--ty-bg-success-bold);\n --tag-color: var(--ty-color-success-strong);\n --tag-border-color: var(--ty-color-success);\n}\n:host([flavor=\"success-\"]) {\n --tag-bg: var(--ty-bg-success-soft);\n --tag-color: var(--ty-color-success);\n --tag-border-color: var(--ty-border-success);\n}\n:host([flavor=\"success\"]) .tag-container[tabindex]:hover,\n:host([flavor=\"success+\"]) .tag-container[tabindex]:hover,\n:host([flavor=\"success-\"]) .tag-container[tabindex]:hover {\n background: var(--ty-bg-success-bold);\n}\n:host([flavor=\"success\"]) .tag-container[tabindex]:focus,\n:host([flavor=\"success+\"]) .tag-container[tabindex]:focus,\n:host([flavor=\"success-\"]) .tag-container[tabindex]:focus {\n box-shadow: 0 0 0 3px var(--ty-color-success-faint);\n}\n\n/* ----- DANGER ----- */\n:host([flavor=\"danger\"]) {\n --tag-bg: var(--ty-bg-danger);\n --tag-color: var(--ty-color-danger-strong);\n --tag-border-color: var(--ty-border-danger);\n}\n:host([flavor=\"danger+\"]) {\n --tag-bg: var(--ty-bg-danger-bold);\n --tag-color: var(--ty-color-danger-strong);\n --tag-border-color: var(--ty-color-danger);\n}\n:host([flavor=\"danger-\"]) {\n --tag-bg: var(--ty-bg-danger-soft);\n --tag-color: var(--ty-color-danger);\n --tag-border-color: var(--ty-border-danger);\n}\n:host([flavor=\"danger\"]) .tag-container[tabindex]:hover,\n:host([flavor=\"danger+\"]) .tag-container[tabindex]:hover,\n:host([flavor=\"danger-\"]) .tag-container[tabindex]:hover {\n background: var(--ty-bg-danger-bold);\n}\n:host([flavor=\"danger\"]) .tag-container[tabindex]:focus,\n:host([flavor=\"danger+\"]) .tag-container[tabindex]:focus,\n:host([flavor=\"danger-\"]) .tag-container[tabindex]:focus {\n box-shadow: 0 0 0 3px var(--ty-color-danger-faint);\n}\n\n/* ----- WARNING ----- */\n:host([flavor=\"warning\"]) {\n --tag-bg: var(--ty-bg-warning);\n --tag-color: var(--ty-color-warning-strong);\n --tag-border-color: var(--ty-border-warning);\n}\n:host([flavor=\"warning+\"]) {\n --tag-bg: var(--ty-bg-warning-bold);\n --tag-color: var(--ty-color-warning-strong);\n --tag-border-color: var(--ty-color-warning);\n}\n:host([flavor=\"warning-\"]) {\n --tag-bg: var(--ty-bg-warning-soft);\n --tag-color: var(--ty-color-warning);\n --tag-border-color: var(--ty-border-warning);\n}\n:host([flavor=\"warning\"]) .tag-container[tabindex]:hover,\n:host([flavor=\"warning+\"]) .tag-container[tabindex]:hover,\n:host([flavor=\"warning-\"]) .tag-container[tabindex]:hover {\n background: var(--ty-bg-warning-bold);\n}\n:host([flavor=\"warning\"]) .tag-container[tabindex]:focus,\n:host([flavor=\"warning+\"]) .tag-container[tabindex]:focus,\n:host([flavor=\"warning-\"]) .tag-container[tabindex]:focus {\n box-shadow: 0 0 0 3px var(--ty-color-warning-faint);\n}\n\n:host([flavor=\"info\"]) .tag-container[tabindex]:focus {\n box-shadow: 0 0 0 3px var(--ty-color-info-faint);\n}\n\n/* ----- NEUTRAL ----- */\n:host([flavor=\"neutral\"]) {\n --tag-color: var(--ty-text-bold);\n --tag-bg: var(--ty-bg-neutral-soft);\n --tag-border-color: var(--ty-border-bold);\n}\n\n:host([flavor=\"neutral+\"]) {\n --tag-bg: var(--ty-bg-neutral-bold);\n --tag-color: var(--ty-text-bold);\n --tag-border-color: var(--ty-border-strong);\n}\n:host([flavor=\"neutral-\"]) {\n --tag-bg: var(--ty-bg-neutral-soft);\n --tag-color: var(--ty-text-soft);\n --tag-border-color: var(--ty-border);\n}\n:host([flavor=\"neutral\"]) .tag-container[tabindex]:hover,\n:host([flavor=\"neutral+\"]) .tag-container[tabindex]:hover,\n:host([flavor=\"neutral-\"]) .tag-container[tabindex]:hover {\n background: var(--ty-bg-neutral-soft);\n}\n:host([flavor=\"neutral\"]) .tag-container[tabindex]:focus,\n:host([flavor=\"neutral+\"]) .tag-container[tabindex]:focus,\n:host([flavor=\"neutral-\"]) .tag-container[tabindex]:focus {\n box-shadow: 0 0 0 3px var(--ty-border-soft);\n}\n\n/* Slotted content styling */\n.tag-start ::slotted(*),\n.tag-content ::slotted(*),\n.tag-end ::slotted(*) {\n display: flex;\n align-items: center;\n}\n\n/* Icon sizing for slotted icons */\n.tag-start ::slotted(ty-icon),\n.tag-end ::slotted(ty-icon) {\n width: 1em;\n height: 1em;\n flex-shrink: 0;\n}\n\n/* Count/badge styling using centralized spacing */\n.tag-end ::slotted(.count) {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-width: var(--ty-spacing-6);\n /* 24px */\n height: var(--ty-spacing-5);\n /* 20px */\n padding: 0 var(--ty-spacing-2);\n /* 0 8px */\n background: rgba(0, 0, 0, 0.1);\n border-radius: var(--ty-radius-full);\n font-size: var(--ty-font-xs);\n font-weight: var(--ty-font-semibold);\n line-height: var(--ty-line-height-none);\n flex-shrink: 0;\n}\n\n/* Special handling for long text content */\n.tag-content {\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n:host([data-type=\"user\"]) .tag-container {\n min-width: var(--ty-spacing-20);\n /* 80px for user tags */\n}\n\n/* Dark mode is handled automatically by the centralized variables */\n";
|
|
6
6
|
//# sourceMappingURL=tag.d.ts.map
|
package/lib/styles/tag.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tag.d.ts","sourceRoot":"","sources":["../../src/styles/tag.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,eAAO,MAAM,SAAS
|
|
1
|
+
{"version":3,"file":"tag.d.ts","sourceRoot":"","sources":["../../src/styles/tag.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,eAAO,MAAM,SAAS,osYAmZrB,CAAC"}
|
package/lib/styles/tag.js
CHANGED
|
@@ -198,7 +198,7 @@ export const tagStyles = `
|
|
|
198
198
|
--tag-border-color: var(--ty-border-primary);
|
|
199
199
|
}
|
|
200
200
|
:host([flavor="primary+"]) {
|
|
201
|
-
--tag-bg: var(--ty-bg-primary-
|
|
201
|
+
--tag-bg: var(--ty-bg-primary-bold);
|
|
202
202
|
--tag-color: var(--ty-color-primary-strong);
|
|
203
203
|
--tag-border-color: var(--ty-color-primary);
|
|
204
204
|
}
|
|
@@ -210,7 +210,7 @@ export const tagStyles = `
|
|
|
210
210
|
:host([flavor="primary"]) .tag-container[tabindex]:hover,
|
|
211
211
|
:host([flavor="primary+"]) .tag-container[tabindex]:hover,
|
|
212
212
|
:host([flavor="primary-"]) .tag-container[tabindex]:hover {
|
|
213
|
-
background: var(--ty-bg-primary-
|
|
213
|
+
background: var(--ty-bg-primary-bold);
|
|
214
214
|
}
|
|
215
215
|
:host([flavor="primary"]) .tag-container[tabindex]:focus,
|
|
216
216
|
:host([flavor="primary+"]) .tag-container[tabindex]:focus,
|
|
@@ -225,7 +225,7 @@ export const tagStyles = `
|
|
|
225
225
|
--tag-border-color: var(--ty-border-secondary);
|
|
226
226
|
}
|
|
227
227
|
:host([flavor="secondary+"]) {
|
|
228
|
-
--tag-bg: var(--ty-bg-secondary-
|
|
228
|
+
--tag-bg: var(--ty-bg-secondary-bold);
|
|
229
229
|
--tag-color: var(--ty-color-secondary-strong);
|
|
230
230
|
--tag-border-color: var(--ty-color-secondary);
|
|
231
231
|
}
|
|
@@ -237,7 +237,7 @@ export const tagStyles = `
|
|
|
237
237
|
:host([flavor="secondary"]) .tag-container[tabindex]:hover,
|
|
238
238
|
:host([flavor="secondary+"]) .tag-container[tabindex]:hover,
|
|
239
239
|
:host([flavor="secondary-"]) .tag-container[tabindex]:hover {
|
|
240
|
-
background: var(--ty-bg-secondary-
|
|
240
|
+
background: var(--ty-bg-secondary-bold);
|
|
241
241
|
}
|
|
242
242
|
:host([flavor="secondary"]) .tag-container[tabindex]:focus,
|
|
243
243
|
:host([flavor="secondary+"]) .tag-container[tabindex]:focus,
|
|
@@ -252,7 +252,7 @@ export const tagStyles = `
|
|
|
252
252
|
--tag-border-color: var(--ty-border-success);
|
|
253
253
|
}
|
|
254
254
|
:host([flavor="success+"]) {
|
|
255
|
-
--tag-bg: var(--ty-bg-success-
|
|
255
|
+
--tag-bg: var(--ty-bg-success-bold);
|
|
256
256
|
--tag-color: var(--ty-color-success-strong);
|
|
257
257
|
--tag-border-color: var(--ty-color-success);
|
|
258
258
|
}
|
|
@@ -264,7 +264,7 @@ export const tagStyles = `
|
|
|
264
264
|
:host([flavor="success"]) .tag-container[tabindex]:hover,
|
|
265
265
|
:host([flavor="success+"]) .tag-container[tabindex]:hover,
|
|
266
266
|
:host([flavor="success-"]) .tag-container[tabindex]:hover {
|
|
267
|
-
background: var(--ty-bg-success-
|
|
267
|
+
background: var(--ty-bg-success-bold);
|
|
268
268
|
}
|
|
269
269
|
:host([flavor="success"]) .tag-container[tabindex]:focus,
|
|
270
270
|
:host([flavor="success+"]) .tag-container[tabindex]:focus,
|
|
@@ -279,7 +279,7 @@ export const tagStyles = `
|
|
|
279
279
|
--tag-border-color: var(--ty-border-danger);
|
|
280
280
|
}
|
|
281
281
|
:host([flavor="danger+"]) {
|
|
282
|
-
--tag-bg: var(--ty-bg-danger-
|
|
282
|
+
--tag-bg: var(--ty-bg-danger-bold);
|
|
283
283
|
--tag-color: var(--ty-color-danger-strong);
|
|
284
284
|
--tag-border-color: var(--ty-color-danger);
|
|
285
285
|
}
|
|
@@ -291,7 +291,7 @@ export const tagStyles = `
|
|
|
291
291
|
:host([flavor="danger"]) .tag-container[tabindex]:hover,
|
|
292
292
|
:host([flavor="danger+"]) .tag-container[tabindex]:hover,
|
|
293
293
|
:host([flavor="danger-"]) .tag-container[tabindex]:hover {
|
|
294
|
-
background: var(--ty-bg-danger-
|
|
294
|
+
background: var(--ty-bg-danger-bold);
|
|
295
295
|
}
|
|
296
296
|
:host([flavor="danger"]) .tag-container[tabindex]:focus,
|
|
297
297
|
:host([flavor="danger+"]) .tag-container[tabindex]:focus,
|
|
@@ -306,7 +306,7 @@ export const tagStyles = `
|
|
|
306
306
|
--tag-border-color: var(--ty-border-warning);
|
|
307
307
|
}
|
|
308
308
|
:host([flavor="warning+"]) {
|
|
309
|
-
--tag-bg: var(--ty-bg-warning-
|
|
309
|
+
--tag-bg: var(--ty-bg-warning-bold);
|
|
310
310
|
--tag-color: var(--ty-color-warning-strong);
|
|
311
311
|
--tag-border-color: var(--ty-color-warning);
|
|
312
312
|
}
|
|
@@ -318,7 +318,7 @@ export const tagStyles = `
|
|
|
318
318
|
:host([flavor="warning"]) .tag-container[tabindex]:hover,
|
|
319
319
|
:host([flavor="warning+"]) .tag-container[tabindex]:hover,
|
|
320
320
|
:host([flavor="warning-"]) .tag-container[tabindex]:hover {
|
|
321
|
-
background: var(--ty-bg-warning-
|
|
321
|
+
background: var(--ty-bg-warning-bold);
|
|
322
322
|
}
|
|
323
323
|
:host([flavor="warning"]) .tag-container[tabindex]:focus,
|
|
324
324
|
:host([flavor="warning+"]) .tag-container[tabindex]:focus,
|
|
@@ -332,20 +332,20 @@ export const tagStyles = `
|
|
|
332
332
|
|
|
333
333
|
/* ----- NEUTRAL ----- */
|
|
334
334
|
:host([flavor="neutral"]) {
|
|
335
|
-
--tag-color: var(--ty-text-
|
|
335
|
+
--tag-color: var(--ty-text-bold);
|
|
336
336
|
--tag-bg: var(--ty-bg-neutral-soft);
|
|
337
|
-
--tag-border-color: var(--ty-border-
|
|
337
|
+
--tag-border-color: var(--ty-border-bold);
|
|
338
338
|
}
|
|
339
339
|
|
|
340
340
|
:host([flavor="neutral+"]) {
|
|
341
|
-
--tag-bg: var(--ty-bg-neutral-
|
|
342
|
-
--tag-color: var(--ty-text-
|
|
341
|
+
--tag-bg: var(--ty-bg-neutral-bold);
|
|
342
|
+
--tag-color: var(--ty-text-bold);
|
|
343
343
|
--tag-border-color: var(--ty-border-strong);
|
|
344
344
|
}
|
|
345
345
|
:host([flavor="neutral-"]) {
|
|
346
346
|
--tag-bg: var(--ty-bg-neutral-soft);
|
|
347
347
|
--tag-color: var(--ty-text-soft);
|
|
348
|
-
--tag-border-color: var(--ty-border
|
|
348
|
+
--tag-border-color: var(--ty-border);
|
|
349
349
|
}
|
|
350
350
|
:host([flavor="neutral"]) .tag-container[tabindex]:hover,
|
|
351
351
|
:host([flavor="neutral+"]) .tag-container[tabindex]:hover,
|
package/lib/styles/textarea.d.ts
CHANGED
|
@@ -2,5 +2,5 @@
|
|
|
2
2
|
* Styles for ty-textarea component
|
|
3
3
|
* Enhanced textarea with auto-resize functionality
|
|
4
4
|
*/
|
|
5
|
-
export declare const textareaStyles = "\n:host {\n display: block;\n font-family: var(--ty-font-sans);\n width: 100%;\n}\n\n.textarea-container {\n display: flex;\n flex-direction: column;\n width: 100%;\n box-sizing: border-box;\n position: relative;\n /* For absolute positioned dummy element */\n}\n\n.textarea-wrapper {\n position: relative;\n width: 100%;\n}\n\n/* Custom scrollbar track positioning within textarea border */\n.textarea-wrapper .ty-scrollbar-track-y {\n top: 2px;\n right: 2px;\n bottom: 2px;\n border-radius: 0 4px 4px 0;\n}\n\n/* ===== LABEL STYLING ===== */\n\n.ty-field-label {\n font-size: var(--ty-font-sm);\n line-height: var(--ty-leading-sm);\n letter-spacing: var(--ty-tracking-sm);\n font-weight: var(--ty-font-medium);\n color: var(--ty-label-color);\n margin-bottom: 6px;\n padding-left: 12px;\n}\n\n/* Required indicator - using SVG icon instead of CSS */\n.required-icon {\n display: inline-flex;\n align-items: center;\n color: var(--ty-color-danger);\n width: 12px;\n height: 12px;\n vertical-align: middle;\n}\n\n/* ===== ERROR MESSAGE STYLING ===== */\n\n.error-message {\n font-size: var(--ty-font-xs);\n line-height: var(--ty-leading-xs);\n letter-spacing: var(--ty-tracking-xs);\n color: var(--ty-color-danger);\n margin-top: 4px;\n padding-left: 12px;\n}\n\n/* Error state for textareas */\ntextarea.error {\n border-color: var(--ty-color-danger);\n background: var(--ty-bg-danger-soft);\n}\n\ntextarea.error:focus {\n border-color: var(--ty-color-danger-
|
|
5
|
+
export declare const textareaStyles = "\n:host {\n display: block;\n font-family: var(--ty-font-sans);\n width: 100%;\n}\n\n.textarea-container {\n display: flex;\n flex-direction: column;\n width: 100%;\n box-sizing: border-box;\n position: relative;\n /* For absolute positioned dummy element */\n}\n\n.textarea-wrapper {\n position: relative;\n width: 100%;\n}\n\n/* Custom scrollbar track positioning within textarea border */\n.textarea-wrapper .ty-scrollbar-track-y {\n top: 2px;\n right: 2px;\n bottom: 2px;\n border-radius: 0 4px 4px 0;\n}\n\n/* ===== LABEL STYLING ===== */\n\n.ty-field-label {\n font-size: var(--ty-font-sm);\n line-height: var(--ty-leading-sm);\n letter-spacing: var(--ty-tracking-sm);\n font-weight: var(--ty-font-medium);\n color: var(--ty-label-color);\n margin-bottom: 6px;\n padding-left: 12px;\n}\n\n/* Required indicator - using SVG icon instead of CSS */\n.required-icon {\n display: inline-flex;\n align-items: center;\n color: var(--ty-color-danger);\n width: 12px;\n height: 12px;\n vertical-align: middle;\n}\n\n/* ===== ERROR MESSAGE STYLING ===== */\n\n.error-message {\n font-size: var(--ty-font-xs);\n line-height: var(--ty-leading-xs);\n letter-spacing: var(--ty-tracking-xs);\n color: var(--ty-color-danger);\n margin-top: 4px;\n padding-left: 12px;\n}\n\n/* Error state for textareas */\ntextarea.error {\n border-color: var(--ty-color-danger);\n background: var(--ty-bg-danger-soft);\n}\n\ntextarea.error:focus {\n border-color: var(--ty-color-danger-bold);\n box-shadow: 0 0 0 3px var(--input-shadow-focus, var(--ty-input-shadow-focus));\n}\n\n/* ===== TEXTAREA BASE STYLING ===== */\n\ntextarea {\n /* Base appearance \u2014 elegant and minimal like input */\n box-sizing: border-box;\n width: 100%;\n border: 1px solid var(--input-border, var(--ty-input-border));\n border-radius: 6px;\n background: var(--input-bg, var(--ty-input-bg));\n color: var(--input-color, var(--ty-input-color));\n font-family: inherit;\n /* Linear-paired typography */\n font-size: var(--ty-font-sm);\n line-height: var(--ty-leading-sm);\n letter-spacing: var(--ty-tracking-sm);\n font-weight: var(--ty-font-normal);\n transition: all 0.15s ease-in-out;\n outline: none;\n\n /* Default size (md) - refined spacing */\n min-height: 80px;\n /* Larger than input for multiline */\n padding: 12px 12px;\n /* Slightly larger padding for text areas */\n\n /* Auto-resize specific styles */\n overflow: hidden;\n /* Hide scrollbars since we're auto-resizing */\n resize: none;\n /* Disable manual resize by default */\n\n /* Ensure consistent text wrapping */\n white-space: pre-wrap;\n word-wrap: break-word;\n}\n\n/* Hide native scrollbar for webkit when custom scrollbar is active\n (scrollbar-width: none handles Firefox; this handles Chrome/Safari) */\n:host([data-custom-scroll]) textarea::-webkit-scrollbar {\n display: none;\n}\n\n/* Focus state - elegant blue glow like input */\ntextarea:focus {\n border-color: var(--input-border-focus, var(--ty-input-border-focus));\n box-shadow: 0 0 0 3px var(--input-shadow-focus, var(--ty-input-shadow-focus));\n background: var(--input-bg, var(--ty-input-bg));\n}\n\n/* Hover state - subtle feedback */\ntextarea:hover:not(:disabled) {\n border-color: var(--input-border-hover, var(--ty-input-border-hover));\n}\n\n/* Disabled state - refined opacity */\ntextarea:disabled {\n cursor: not-allowed;\n opacity: 0.5;\n background: var(--input-disabled-bg, var(--ty-input-disabled-bg));\n border-color: var(--input-disabled-border, var(--ty-input-disabled-border));\n color: var(--input-disabled-color, var(--ty-input-disabled-color));\n}\n\n/* Placeholder styling - subtle and elegant */\ntextarea::placeholder {\n color: var(--input-placeholder, var(--ty-input-placeholder));\n font-weight: 400;\n}\n\n/* ===== RESIZE CONTROL OPTIONS ===== */\n\n/* Allow manual resizing */\ntextarea.resize-both {\n resize: both;\n}\n\ntextarea.resize-horizontal {\n resize: horizontal;\n}\n\ntextarea.resize-vertical {\n resize: vertical;\n}\n\ntextarea.resize-none {\n resize: none;\n}\n\n/* Auto-resize mode (default) disables manual resize */\ntextarea:not(.resize-both):not(.resize-horizontal):not(.resize-vertical) {\n resize: none;\n}\n\n/* ===== DUMMY ELEMENT FOR AUTO-RESIZE ===== */\n\n.textarea-dummy {\n /* Hidden element that measures text height */\n position: absolute !important;\n top: 0 !important;\n left: 0 !important;\n visibility: hidden !important;\n white-space: pre-wrap !important;\n word-break: break-word !important;\n box-sizing: border-box !important;\n overflow: hidden !important;\n pointer-events: none !important;\n z-index: -1 !important;\n\n /* Ensure it has the same text behavior as textarea */\n word-wrap: break-word !important;\n overflow-wrap: break-word !important;\n}\n\n/* ===== SIZE MODIFIERS ===== */\n\n/* Extra Small */\ntextarea.xs {\n min-height: 64px;\n padding: 8px 10px;\n font-size: var(--ty-font-xs);\n line-height: var(--ty-leading-xs);\n letter-spacing: var(--ty-tracking-xs);\n}\n\n/* Small */\ntextarea.sm {\n min-height: 72px;\n padding: 10px 10px;\n font-size: var(--ty-font-sm);\n line-height: var(--ty-leading-sm);\n letter-spacing: var(--ty-tracking-sm);\n}\n\n/* Medium (default) */\ntextarea.md {\n min-height: 80px;\n padding: 12px 12px;\n font-size: var(--ty-font-sm);\n line-height: var(--ty-leading-sm);\n letter-spacing: var(--ty-tracking-sm);\n}\n\n/* Large */\ntextarea.lg {\n min-height: 96px;\n padding: 14px 14px;\n font-size: var(--ty-font-base);\n line-height: var(--ty-leading-base);\n letter-spacing: var(--ty-tracking-base);\n}\n\n/* Extra Large */\ntextarea.xl {\n min-height: 112px;\n padding: 16px 16px;\n font-size: var(--ty-font-lg);\n line-height: var(--ty-leading-lg);\n letter-spacing: var(--ty-tracking-lg);\n}\n\n/* ===== ACCESSIBILITY ENHANCEMENTS ===== */\n\ntextarea:focus-visible {\n outline: none;\n /* We use box-shadow instead */\n}\n\n/* High contrast mode support */\n@media (prefers-contrast: high) {\n textarea {\n border-width: 2px;\n }\n}\n\n/* Reduced motion support */\n@media (prefers-reduced-motion: reduce) {\n textarea {\n transition: none;\n }\n\n .textarea-dummy {\n transition: none;\n }\n}\n\n/* ===== CONTAINER-AWARE RESPONSIVE BEHAVIOR ===== */\n\n/* Scale down on smaller containers using container queries */\n@container (max-width: 480px) {\n textarea.lg {\n font-size: var(--ty-font-sm);\n line-height: var(--ty-leading-sm);\n letter-spacing: var(--ty-tracking-sm);\n padding: 12px 12px;\n min-height: 80px;\n }\n\n textarea.xl {\n font-size: var(--ty-font-base);\n line-height: var(--ty-leading-base);\n letter-spacing: var(--ty-tracking-base);\n padding: 14px 14px;\n min-height: 96px;\n }\n}\n\n@container (max-width: 320px) {\n textarea.xl {\n font-size: var(--ty-font-sm);\n line-height: var(--ty-leading-sm);\n letter-spacing: var(--ty-tracking-sm);\n padding: 12px 12px;\n min-height: 80px;\n }\n}\n\n/* Fallback for browsers without container query support */\n@media (max-width: 640px) {\n textarea.lg {\n font-size: var(--ty-font-sm);\n line-height: var(--ty-leading-sm);\n letter-spacing: var(--ty-tracking-sm);\n padding: 12px 12px;\n min-height: 80px;\n }\n\n textarea.xl {\n font-size: var(--ty-font-base);\n line-height: var(--ty-leading-base);\n letter-spacing: var(--ty-tracking-base);\n padding: 14px 14px;\n min-height: 96px;\n }\n}\n\n@media (max-width: 480px) {\n textarea.xl {\n font-size: var(--ty-font-sm);\n line-height: var(--ty-leading-sm);\n letter-spacing: var(--ty-tracking-sm);\n padding: 12px 12px;\n min-height: 80px;\n }\n}\n\n/* ===== ANIMATION AND TRANSITIONS ===== */\n\n/* Smooth height transitions for auto-resize */\ntextarea {\n transition:\n border-color 0.15s ease-in-out,\n box-shadow 0.15s ease-in-out,\n background-color 0.15s ease-in-out,\n height 0.1s ease-out;\n /* Smooth height changes */\n}\n\n/* Disable height transition on focus to avoid jarring effect */\ntextarea:focus {\n transition:\n border-color 0.15s ease-in-out,\n box-shadow 0.15s ease-in-out,\n background-color 0.15s ease-in-out;\n}\n\n/* For users who prefer reduced motion, disable height transitions */\n@media (prefers-reduced-motion: reduce) {\n textarea {\n transition: none;\n }\n}\n";
|
|
6
6
|
//# sourceMappingURL=textarea.d.ts.map
|
package/lib/styles/textarea.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tooltip.d.ts","sourceRoot":"","sources":["../../src/styles/tooltip.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAEvD,eAAO,MAAM,aAAa,EAAE,
|
|
1
|
+
{"version":3,"file":"tooltip.d.ts","sourceRoot":"","sources":["../../src/styles/tooltip.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAEvD,eAAO,MAAM,aAAa,EAAE,YA6H3B,CAAC"}
|
package/lib/styles/tooltip.js
CHANGED
|
@@ -42,9 +42,11 @@ export const tooltipStyles = {
|
|
|
42
42
|
|
|
43
43
|
/* Base tooltip styling - Dark inverted style (like buttons) */
|
|
44
44
|
#tooltip-container {
|
|
45
|
-
/* Bold, high-contrast styling
|
|
46
|
-
|
|
47
|
-
|
|
45
|
+
/* Bold, high-contrast styling. Defaults route through the neutral ramp
|
|
46
|
+
* so the tooltip inverts cleanly: dark in light mode, light in dark mode.
|
|
47
|
+
* Consumers can pin it to a fixed look via --ty-tooltip-bg/-color. */
|
|
48
|
+
background: var(--ty-tooltip-bg, var(--ty-color-neutral-strong));
|
|
49
|
+
color: var(--ty-tooltip-color, var(--ty-color-neutral-faint));
|
|
48
50
|
|
|
49
51
|
/* Comfortable padding */
|
|
50
52
|
padding: var(--ty-tooltip-padding, 8px 12px);
|
|
@@ -99,12 +101,6 @@ export const tooltipStyles = {
|
|
|
99
101
|
color: #ffffff;
|
|
100
102
|
}
|
|
101
103
|
|
|
102
|
-
/* Info - Bold cyan/blue */
|
|
103
|
-
#tooltip-container[data-flavor="info"] {
|
|
104
|
-
background: var(--ty-color-info, #06b6d4);
|
|
105
|
-
color: #ffffff;
|
|
106
|
-
}
|
|
107
|
-
|
|
108
104
|
/* Neutral - Medium gray (default alternative) */
|
|
109
105
|
#tooltip-container[data-flavor="neutral"] {
|
|
110
106
|
background: var(--ty-color-neutral, #6b7280);
|
|
@@ -113,17 +109,18 @@ export const tooltipStyles = {
|
|
|
113
109
|
|
|
114
110
|
/* Light - For dark backgrounds */
|
|
115
111
|
#tooltip-container[data-flavor="light"] {
|
|
116
|
-
background: var(--ty-surface-elevated, #ffffff);
|
|
117
|
-
color: var(--ty-
|
|
118
|
-
box-shadow:
|
|
112
|
+
background: var(--ty-surface-floating, var(--ty-surface-elevated, #ffffff));
|
|
113
|
+
color: var(--ty-color-neutral-strong, #111827);
|
|
114
|
+
box-shadow: var(--ty-shadow-lg,
|
|
115
|
+
0 10px 15px -3px rgba(0, 0, 0, 0.15),
|
|
119
116
|
0 4px 6px -4px rgba(0, 0, 0, 0.1),
|
|
120
|
-
0 0 0 1px rgba(0, 0, 0, 0.05);
|
|
117
|
+
0 0 0 1px rgba(0, 0, 0, 0.05));
|
|
121
118
|
}
|
|
122
119
|
|
|
123
120
|
/* Dark - Inverted style (default) */
|
|
124
121
|
#tooltip-container[data-flavor="dark"] {
|
|
125
|
-
background: var(--ty-tooltip-bg,
|
|
126
|
-
color:
|
|
122
|
+
background: var(--ty-tooltip-bg, var(--ty-color-neutral-strong));
|
|
123
|
+
color: var(--ty-color-neutral-faint);
|
|
127
124
|
}
|
|
128
125
|
|
|
129
126
|
/* Secondary - Purple/indigo */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tooltip.js","sourceRoot":"","sources":["../../src/styles/tooltip.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAIH,MAAM,CAAC,MAAM,aAAa,GAAiB;IACzC,EAAE,EAAE,YAAY;IAChB,GAAG,EAAE
|
|
1
|
+
{"version":3,"file":"tooltip.js","sourceRoot":"","sources":["../../src/styles/tooltip.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAIH,MAAM,CAAC,MAAM,aAAa,GAAiB;IACzC,EAAE,EAAE,YAAY;IAChB,GAAG,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0HN;CACA,CAAC"}
|
package/lib/styles/wizard.d.ts
CHANGED
|
@@ -7,14 +7,19 @@
|
|
|
7
7
|
* - step-circle: Individual step circle indicators
|
|
8
8
|
* - panels-container: The content viewport
|
|
9
9
|
*
|
|
10
|
-
* Theming
|
|
10
|
+
* Theming: four accent-alias knobs (one per state), four surface knobs
|
|
11
|
+
* (container chrome), and a small set of geometry/motion overrides.
|
|
11
12
|
*
|
|
12
|
-
*
|
|
13
|
-
*
|
|
14
|
-
*
|
|
13
|
+
* Per-state circles read their colors directly from the matching accent
|
|
14
|
+
* variable — no per-state `-bg` indirection. Override one of:
|
|
15
|
+
* --ty-wizard-active-accent (default: --ty-color-primary)
|
|
16
|
+
* --ty-wizard-completed-accent (default: --ty-color-success)
|
|
17
|
+
* --ty-wizard-error-accent (default: --ty-color-danger)
|
|
18
|
+
* --ty-wizard-pending-accent (default: --ty-color-neutral)
|
|
15
19
|
*
|
|
16
|
-
*
|
|
17
|
-
*
|
|
20
|
+
* For per-shade fine control, override the brand-layer's flavor seeds
|
|
21
|
+
* (--ty-color-primary, --ty-color-success-strong, etc.) — they cascade
|
|
22
|
+
* through here.
|
|
18
23
|
*/
|
|
19
|
-
export declare const wizardStyles = "\n/* ============================================================================\n Theming Tokens\n All defaults chain back to global --ty-color-* / --ty-surface-* tokens.\n Override on the host element or a wrapping container.\n ============================================================================ */\n\n:host {\n display: block;\n width: var(--ty-wizard-width, 100%); /* set by width attribute \u2014 not a public token */\n height: var(--ty-wizard-height, 700px); /* set by height attribute \u2014 not a public token */\n box-sizing: border-box;\n\n /* Accent aliases \u2014 override one to shift the matching circle, glow, and progress fill */\n --ty-wizard-active-accent: var(--ty-color-primary);\n --ty-wizard-completed-accent: var(--ty-color-success);\n --ty-wizard-error-accent: var(--ty-color-danger);\n --ty-wizard-pending-accent: var(--ty-color-neutral);\n\n /* Container */\n --ty-wizard-bg: var(--ty-surface-floating);\n --ty-wizard-border: var(--ty-border);\n --ty-wizard-radius: 12px;\n --ty-wizard-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);\n\n /* Header strip */\n --ty-wizard-header-bg: var(--ty-surface-content);\n --ty-wizard-header-border: var(--ty-border-soft, var(--ty-border));\n --ty-wizard-header-padding: 24px 24px 16px;\n\n /* Progress line */\n --ty-wizard-progress-track: var(--ty-border);\n --ty-wizard-progress-fill: var(--ty-wizard-completed-accent);\n --ty-wizard-progress-height: 2px;\n\n /* Transitions */\n --ty-wizard-transition-duration: 300ms;\n --ty-wizard-transition-easing: ease-in-out;\n\n /* Circle geometry */\n --ty-wizard-circle-size: 32px;\n --ty-wizard-circle-border-width: 2px;\n\n /* Step circle \u2014 completed */\n --ty-wizard-completed-bg: var(--ty-wizard-completed-accent);\n --ty-wizard-completed-border: var(--ty-color-success-strong);\n --ty-wizard-completed-color: white;\n --ty-wizard-completed-glow: color-mix(in srgb, var(--ty-wizard-completed-accent) 10%, transparent);\n\n /* Step circle \u2014 active */\n --ty-wizard-active-bg: var(--ty-wizard-active-accent);\n --ty-wizard-active-border: var(--ty-color-primary-strong);\n --ty-wizard-active-color: white;\n --ty-wizard-active-glow: color-mix(in srgb, var(--ty-wizard-active-accent) 10%, transparent);\n\n /* Step circle \u2014 pending */\n --ty-wizard-pending-bg: var(--ty-surface-elevated);\n --ty-wizard-pending-border: var(--ty-border);\n --ty-wizard-pending-color: var(--ty-text-soft);\n\n /* Step circle \u2014 error */\n --ty-wizard-error-bg: var(--ty-wizard-error-accent);\n --ty-wizard-error-border: var(--ty-color-danger-strong);\n --ty-wizard-error-color: white;\n --ty-wizard-error-glow: color-mix(in srgb, var(--ty-wizard-error-accent) 10%, transparent);\n\n /* Labels */\n --ty-wizard-label-color: var(--ty-text);\n --ty-wizard-label-active-color: var(--ty-text-strong);\n --ty-wizard-label-inactive-color: var(--ty-text-soft);\n --ty-wizard-label-size: var(--ty-font-sm, 14px);\n --ty-wizard-label-weight: var(--ty-font-semibold, 600);\n\n /* Descriptions */\n --ty-wizard-description-color: var(--ty-text-soft);\n --ty-wizard-description-active-color: var(--ty-text);\n --ty-wizard-description-size: var(--ty-font-xs, 12px);\n\n /* Panels viewport */\n --ty-wizard-panels-bg: var(--ty-surface-elevated);\n\n /* Focus */\n --ty-wizard-focus-outline: var(--ty-wizard-active-accent);\n}\n\n.wizard-container {\n width: 100%;\n height: 100%;\n display: flex;\n flex-direction: column;\n position: relative;\n box-sizing: border-box;\n border-radius: var(--ty-wizard-radius);\n border: 1px solid var(--ty-wizard-border);\n background: var(--ty-wizard-bg);\n box-shadow: var(--ty-wizard-shadow);\n overflow: hidden;\n}\n\n/* ===================================== */\n/* Step Indicators Wrapper */\n/* ===================================== */\n\n.step-indicators-wrapper {\n display: flex;\n flex-direction: column;\n flex-shrink: 0;\n position: relative;\n padding: var(--ty-wizard-header-padding);\n border-bottom: 1px solid var(--ty-wizard-header-border);\n background: var(--ty-wizard-header-bg);\n}\n\n/* ===================================== */\n/* Progress Line (behind step circles) */\n/* ===================================== */\n\n.progress-line {\n position: absolute;\n /*\n * With equal-width indicators (flex: 1), each takes 100%/N of the width.\n * Circle centers sit at 50%/N from the left edge of each indicator.\n * Inset = 50% / step-count from each side keeps the line between circle centres.\n */\n left: calc(50% / var(--ty-wizard-step-count, 4));\n right: calc(50% / var(--ty-wizard-step-count, 4));\n top: calc(var(--ty-wizard-circle-size, 32px) / 2 - 1px);\n height: var(--ty-wizard-progress-height);\n background: var(--ty-wizard-progress-track);\n z-index: 0;\n pointer-events: none;\n transition: opacity var(--ty-wizard-transition-duration) var(--ty-wizard-transition-easing);\n}\n\n.progress-overlay {\n position: absolute;\n left: 0;\n top: 0;\n height: 100%;\n background: var(--ty-wizard-progress-fill);\n transition: width var(--ty-wizard-transition-duration) var(--ty-wizard-transition-easing);\n will-change: width;\n}\n\n/* ===================================== */\n/* Step Indicators Container */\n/* ===================================== */\n\n.step-indicators {\n display: flex;\n align-items: flex-start;\n position: relative;\n}\n\n/* ===================================== */\n/* Individual Step Indicator */\n/* ===================================== */\n\n.step-indicator {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 8px;\n cursor: pointer;\n background: transparent;\n border: none;\n padding: 0;\n font: inherit;\n transition: opacity 200ms;\n flex: 1;\n min-width: 0;\n}\n\n.step-indicator[aria-disabled=\"true\"] {\n opacity: 0.4;\n cursor: not-allowed;\n pointer-events: none;\n}\n\n.step-indicator:focus-visible {\n outline: 2px solid var(--ty-wizard-focus-outline);\n outline-offset: 4px;\n border-radius: 50%;\n}\n\n/* ===================================== */\n/* Step Circle */\n/* ===================================== */\n\n.step-circle {\n width: var(--ty-wizard-circle-size);\n height: var(--ty-wizard-circle-size);\n border-radius: 50%;\n border: var(--ty-wizard-circle-border-width) solid;\n display: flex;\n align-items: center;\n justify-content: center;\n position: relative;\n z-index: 10;\n transition: all var(--ty-wizard-transition-duration) var(--ty-wizard-transition-easing);\n box-sizing: border-box;\n flex-shrink: 0;\n}\n\n.step-circle[data-state=\"completed\"] {\n background: var(--ty-wizard-completed-bg);\n border-color: var(--ty-wizard-completed-border);\n color: var(--ty-wizard-completed-color);\n box-shadow: 0 0 0 4px var(--ty-wizard-completed-glow);\n}\n\n.step-circle[data-state=\"active\"] {\n background: var(--ty-wizard-active-bg);\n border-color: var(--ty-wizard-active-border);\n color: var(--ty-wizard-active-color);\n box-shadow: 0 0 0 4px var(--ty-wizard-active-glow);\n}\n\n.step-circle[data-state=\"pending\"] {\n background: var(--ty-wizard-pending-bg);\n border-color: var(--ty-wizard-pending-border);\n color: var(--ty-wizard-pending-color);\n}\n\n.step-circle[data-state=\"error\"] {\n background: var(--ty-wizard-error-bg);\n border-color: var(--ty-wizard-error-border);\n color: var(--ty-wizard-error-color);\n box-shadow: 0 0 0 4px var(--ty-wizard-error-glow);\n}\n\n/* ===================================== */\n/* Step Text Container */\n/* ===================================== */\n\n.step-text {\n display: flex;\n flex-direction: column;\n gap: 2px;\n align-items: center;\n}\n\n/* ===================================== */\n/* Step Label */\n/* ===================================== */\n\n.step-label {\n font-size: var(--ty-wizard-label-size);\n font-weight: var(--ty-wizard-label-weight);\n color: var(--ty-wizard-label-color);\n transition: color 200ms;\n}\n\n.step-indicator[aria-selected=\"true\"] .step-label {\n color: var(--ty-wizard-label-active-color);\n}\n\n.step-indicator[aria-selected=\"false\"] .step-label {\n color: var(--ty-wizard-label-inactive-color);\n}\n\n/* ===================================== */\n/* Step Description */\n/* ===================================== */\n\n.step-description {\n font-size: var(--ty-wizard-description-size);\n font-weight: var(--ty-font-normal, 400);\n color: var(--ty-wizard-description-color);\n transition: color 200ms;\n text-align: center;\n max-width: 120px;\n}\n\n.step-indicator[aria-selected=\"true\"] .step-description {\n color: var(--ty-wizard-description-active-color);\n}\n\n/* ===================================== */\n/* Custom Indicator Content via Slots */\n/* ===================================== */\n\n::slotted([slot^=\"indicator-\"]) {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 100%;\n height: 100%;\n}\n\n/* ===================================== */\n/* Panels Viewport */\n/* ===================================== */\n\n.panels-viewport {\n position: relative;\n flex: 1;\n overflow: hidden;\n min-height: 0;\n background: var(--ty-wizard-panels-bg);\n}\n\n/* ===================================== */\n/* Panels Wrapper (slides horizontally) */\n/* ===================================== */\n\n.panels-wrapper {\n display: flex;\n height: 100%;\n transition: transform var(--ty-wizard-transition-duration) var(--ty-wizard-transition-easing);\n will-change: transform;\n}\n\n/* ===================================== */\n/* Slotted Step Panels */\n/* ===================================== */\n\n::slotted(ty-step) {\n width: var(--ty-wizard-width, 100%);\n height: 100%;\n flex-shrink: 0;\n}\n\n/* ===================================== */\n/* Accessibility & Motion Preferences */\n/* ===================================== */\n\n@media (prefers-reduced-motion: reduce) {\n .panels-wrapper {\n transition-duration: 0ms !important;\n }\n\n .progress-overlay {\n transition-duration: 0ms !important;\n }\n\n .step-circle {\n transition-duration: 0ms !important;\n }\n\n .progress-line {\n transition-duration: 0ms !important;\n }\n}\n\n.sr-only {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border-width: 0;\n}\n";
|
|
24
|
+
export declare const wizardStyles = "\n/* ============================================================================\n Theming Tokens \u2014 see file header for the override surface.\n Every default chains back to the brand layer / global scale tokens.\n ============================================================================ */\n\n:host {\n display: block;\n width: var(--ty-wizard-width, 100%); /* set by width attribute \u2014 not a public token */\n height: var(--ty-wizard-height, 700px); /* set by height attribute \u2014 not a public token */\n box-sizing: border-box;\n\n /* State accents \u2014 the primary override surface. One variable retints the\n * matching circle background, border, and glow. */\n --ty-wizard-active-accent: var(--ty-color-primary);\n --ty-wizard-completed-accent: var(--ty-color-success);\n --ty-wizard-error-accent: var(--ty-color-danger);\n --ty-wizard-pending-accent: var(--ty-color-neutral);\n\n /* Container chrome \u2014 routes through global scales. Override --ty-radius-lg\n * or --ty-shadow-md app-wide and the wizard follows; override these locally\n * to give the wizard a distinct look. */\n --ty-wizard-bg: var(--ty-surface-floating);\n --ty-wizard-border: var(--ty-border);\n --ty-wizard-radius: var(--ty-radius-lg, 12px);\n --ty-wizard-shadow: var(--ty-shadow-md, 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1));\n\n /* Header strip */\n --ty-wizard-header-bg: var(--ty-surface-content);\n --ty-wizard-header-border: var(--ty-border-soft, var(--ty-border));\n --ty-wizard-header-padding: 24px 24px 16px;\n\n /* Progress line */\n --ty-wizard-progress-track: var(--ty-border);\n --ty-wizard-progress-fill: var(--ty-wizard-completed-accent);\n --ty-wizard-progress-height: 2px;\n\n /* Motion \u2014 routes through global motion tokens if defined. */\n --ty-wizard-transition-duration: var(--ty-transition-duration, 300ms);\n --ty-wizard-transition-easing: var(--ty-transition-easing, ease-in-out);\n\n /* Circle geometry */\n --ty-wizard-circle-size: 32px;\n --ty-wizard-circle-border-width: 2px;\n\n /* Panels viewport */\n --ty-wizard-panels-bg: var(--ty-surface-elevated);\n\n /* Focus */\n --ty-wizard-focus-outline: var(--ty-wizard-active-accent);\n}\n\n.wizard-container {\n width: 100%;\n height: 100%;\n display: flex;\n flex-direction: column;\n position: relative;\n box-sizing: border-box;\n border-radius: var(--ty-wizard-radius);\n border: 1px solid var(--ty-wizard-border);\n background: var(--ty-wizard-bg);\n box-shadow: var(--ty-wizard-shadow);\n overflow: hidden;\n}\n\n/* ===================================== */\n/* Step Indicators Wrapper */\n/* ===================================== */\n\n.step-indicators-wrapper {\n display: flex;\n flex-direction: column;\n flex-shrink: 0;\n position: relative;\n padding: var(--ty-wizard-header-padding);\n border-bottom: 1px solid var(--ty-wizard-header-border);\n background: var(--ty-wizard-header-bg);\n}\n\n/* ===================================== */\n/* Progress Line (behind step circles) */\n/* ===================================== */\n\n.progress-line {\n position: absolute;\n /*\n * With equal-width indicators (flex: 1), each takes 100%/N of the width.\n * Circle centers sit at 50%/N from the left edge of each indicator.\n * Inset = 50% / step-count from each side keeps the line between circle centres.\n */\n left: calc(50% / var(--ty-wizard-step-count, 4));\n right: calc(50% / var(--ty-wizard-step-count, 4));\n top: calc(var(--ty-wizard-circle-size, 32px) / 2 - 1px);\n height: var(--ty-wizard-progress-height);\n background: var(--ty-wizard-progress-track);\n z-index: 0;\n pointer-events: none;\n transition: opacity var(--ty-wizard-transition-duration) var(--ty-wizard-transition-easing);\n}\n\n.progress-overlay {\n position: absolute;\n left: 0;\n top: 0;\n height: 100%;\n background: var(--ty-wizard-progress-fill);\n transition: width var(--ty-wizard-transition-duration) var(--ty-wizard-transition-easing);\n will-change: width;\n}\n\n/* ===================================== */\n/* Step Indicators Container */\n/* ===================================== */\n\n.step-indicators {\n display: flex;\n align-items: flex-start;\n position: relative;\n}\n\n/* ===================================== */\n/* Individual Step Indicator */\n/* ===================================== */\n\n.step-indicator {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 8px;\n cursor: pointer;\n background: transparent;\n border: none;\n padding: 0;\n font: inherit;\n transition: opacity 200ms;\n flex: 1;\n min-width: 0;\n}\n\n.step-indicator[aria-disabled=\"true\"] {\n opacity: 0.4;\n cursor: not-allowed;\n pointer-events: none;\n}\n\n.step-indicator:focus-visible {\n outline: 2px solid var(--ty-wizard-focus-outline);\n outline-offset: 4px;\n border-radius: 50%;\n}\n\n/* ===================================== */\n/* Step Circle */\n/* ===================================== */\n\n.step-circle {\n width: var(--ty-wizard-circle-size);\n height: var(--ty-wizard-circle-size);\n border-radius: 50%;\n border: var(--ty-wizard-circle-border-width) solid;\n display: flex;\n align-items: center;\n justify-content: center;\n position: relative;\n z-index: 10;\n transition: all var(--ty-wizard-transition-duration) var(--ty-wizard-transition-easing);\n box-sizing: border-box;\n flex-shrink: 0;\n}\n\n.step-circle[data-state=\"completed\"] {\n background: var(--ty-wizard-completed-accent);\n border-color: var(--ty-color-success-strong);\n color: var(--ty-solid-success-fg, white);\n box-shadow: 0 0 0 4px color-mix(in oklab, var(--ty-wizard-completed-accent) 12%, transparent);\n}\n\n.step-circle[data-state=\"active\"] {\n background: var(--ty-wizard-active-accent);\n border-color: var(--ty-color-primary-strong);\n color: var(--ty-solid-primary-fg, white);\n box-shadow: 0 0 0 4px color-mix(in oklab, var(--ty-wizard-active-accent) 12%, transparent);\n}\n\n.step-circle[data-state=\"pending\"] {\n background: var(--ty-surface-elevated);\n border-color: var(--ty-border);\n color: var(--ty-color-neutral);\n}\n\n.step-circle[data-state=\"error\"] {\n background: var(--ty-wizard-error-accent);\n border-color: var(--ty-color-danger-strong);\n color: var(--ty-solid-danger-fg, white);\n box-shadow: 0 0 0 4px color-mix(in oklab, var(--ty-wizard-error-accent) 12%, transparent);\n}\n\n/* ===================================== */\n/* Step Text Container */\n/* ===================================== */\n\n.step-text {\n display: flex;\n flex-direction: column;\n gap: 2px;\n align-items: center;\n}\n\n/* ===================================== */\n/* Step Label */\n/* ===================================== */\n\n.step-label {\n font-size: var(--ty-font-sm, 14px);\n font-weight: var(--ty-font-semibold, 600);\n color: var(--ty-color-neutral);\n transition: color 200ms;\n}\n\n.step-indicator[aria-selected=\"true\"] .step-label {\n color: var(--ty-color-neutral-strong);\n}\n\n.step-indicator[aria-selected=\"false\"] .step-label {\n color: var(--ty-color-neutral);\n}\n\n/* ===================================== */\n/* Step Description */\n/* ===================================== */\n\n.step-description {\n font-size: var(--ty-font-xs, 12px);\n font-weight: var(--ty-font-normal, 400);\n color: var(--ty-color-neutral);\n transition: color 200ms;\n text-align: center;\n max-width: 120px;\n}\n\n.step-indicator[aria-selected=\"true\"] .step-description {\n color: var(--ty-color-neutral-bold);\n}\n\n/* ===================================== */\n/* Custom Indicator Content via Slots */\n/* ===================================== */\n\n::slotted([slot^=\"indicator-\"]) {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 100%;\n height: 100%;\n}\n\n/* ===================================== */\n/* Panels Viewport */\n/* ===================================== */\n\n.panels-viewport {\n position: relative;\n flex: 1;\n overflow: hidden;\n min-height: 0;\n background: var(--ty-wizard-panels-bg);\n}\n\n/* ===================================== */\n/* Panels Wrapper (slides horizontally) */\n/* ===================================== */\n\n.panels-wrapper {\n display: flex;\n height: 100%;\n transition: transform var(--ty-wizard-transition-duration) var(--ty-wizard-transition-easing);\n will-change: transform;\n}\n\n/* ===================================== */\n/* Slotted Step Panels */\n/* ===================================== */\n\n::slotted(ty-step) {\n width: var(--ty-wizard-width, 100%);\n height: 100%;\n flex-shrink: 0;\n}\n\n/* ===================================== */\n/* Accessibility & Motion Preferences */\n/* ===================================== */\n\n@media (prefers-reduced-motion: reduce) {\n .panels-wrapper {\n transition-duration: 0ms !important;\n }\n\n .progress-overlay {\n transition-duration: 0ms !important;\n }\n\n .step-circle {\n transition-duration: 0ms !important;\n }\n\n .progress-line {\n transition-duration: 0ms !important;\n }\n}\n\n.sr-only {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border-width: 0;\n}\n";
|
|
20
25
|
//# sourceMappingURL=wizard.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"wizard.d.ts","sourceRoot":"","sources":["../../src/styles/wizard.ts"],"names":[],"mappings":"AAAA
|
|
1
|
+
{"version":3,"file":"wizard.d.ts","sourceRoot":"","sources":["../../src/styles/wizard.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AAEH,eAAO,MAAM,YAAY,yzSAmUxB,CAAC"}
|
package/lib/styles/wizard.js
CHANGED
|
@@ -7,20 +7,24 @@
|
|
|
7
7
|
* - step-circle: Individual step circle indicators
|
|
8
8
|
* - panels-container: The content viewport
|
|
9
9
|
*
|
|
10
|
-
* Theming
|
|
10
|
+
* Theming: four accent-alias knobs (one per state), four surface knobs
|
|
11
|
+
* (container chrome), and a small set of geometry/motion overrides.
|
|
11
12
|
*
|
|
12
|
-
*
|
|
13
|
-
*
|
|
14
|
-
*
|
|
13
|
+
* Per-state circles read their colors directly from the matching accent
|
|
14
|
+
* variable — no per-state `-bg` indirection. Override one of:
|
|
15
|
+
* --ty-wizard-active-accent (default: --ty-color-primary)
|
|
16
|
+
* --ty-wizard-completed-accent (default: --ty-color-success)
|
|
17
|
+
* --ty-wizard-error-accent (default: --ty-color-danger)
|
|
18
|
+
* --ty-wizard-pending-accent (default: --ty-color-neutral)
|
|
15
19
|
*
|
|
16
|
-
*
|
|
17
|
-
*
|
|
20
|
+
* For per-shade fine control, override the brand-layer's flavor seeds
|
|
21
|
+
* (--ty-color-primary, --ty-color-success-strong, etc.) — they cascade
|
|
22
|
+
* through here.
|
|
18
23
|
*/
|
|
19
24
|
export const wizardStyles = `
|
|
20
25
|
/* ============================================================================
|
|
21
|
-
Theming Tokens
|
|
22
|
-
|
|
23
|
-
Override on the host element or a wrapping container.
|
|
26
|
+
Theming Tokens — see file header for the override surface.
|
|
27
|
+
Every default chains back to the brand layer / global scale tokens.
|
|
24
28
|
============================================================================ */
|
|
25
29
|
|
|
26
30
|
:host {
|
|
@@ -29,17 +33,20 @@ export const wizardStyles = `
|
|
|
29
33
|
height: var(--ty-wizard-height, 700px); /* set by height attribute — not a public token */
|
|
30
34
|
box-sizing: border-box;
|
|
31
35
|
|
|
32
|
-
/*
|
|
36
|
+
/* State accents — the primary override surface. One variable retints the
|
|
37
|
+
* matching circle background, border, and glow. */
|
|
33
38
|
--ty-wizard-active-accent: var(--ty-color-primary);
|
|
34
39
|
--ty-wizard-completed-accent: var(--ty-color-success);
|
|
35
40
|
--ty-wizard-error-accent: var(--ty-color-danger);
|
|
36
41
|
--ty-wizard-pending-accent: var(--ty-color-neutral);
|
|
37
42
|
|
|
38
|
-
/* Container
|
|
43
|
+
/* Container chrome — routes through global scales. Override --ty-radius-lg
|
|
44
|
+
* or --ty-shadow-md app-wide and the wizard follows; override these locally
|
|
45
|
+
* to give the wizard a distinct look. */
|
|
39
46
|
--ty-wizard-bg: var(--ty-surface-floating);
|
|
40
47
|
--ty-wizard-border: var(--ty-border);
|
|
41
|
-
--ty-wizard-radius: 12px;
|
|
42
|
-
--ty-wizard-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
|
|
48
|
+
--ty-wizard-radius: var(--ty-radius-lg, 12px);
|
|
49
|
+
--ty-wizard-shadow: var(--ty-shadow-md, 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1));
|
|
43
50
|
|
|
44
51
|
/* Header strip */
|
|
45
52
|
--ty-wizard-header-bg: var(--ty-surface-content);
|
|
@@ -51,49 +58,14 @@ export const wizardStyles = `
|
|
|
51
58
|
--ty-wizard-progress-fill: var(--ty-wizard-completed-accent);
|
|
52
59
|
--ty-wizard-progress-height: 2px;
|
|
53
60
|
|
|
54
|
-
/*
|
|
55
|
-
--ty-wizard-transition-duration: 300ms;
|
|
56
|
-
--ty-wizard-transition-easing: ease-in-out;
|
|
61
|
+
/* Motion — routes through global motion tokens if defined. */
|
|
62
|
+
--ty-wizard-transition-duration: var(--ty-transition-duration, 300ms);
|
|
63
|
+
--ty-wizard-transition-easing: var(--ty-transition-easing, ease-in-out);
|
|
57
64
|
|
|
58
65
|
/* Circle geometry */
|
|
59
66
|
--ty-wizard-circle-size: 32px;
|
|
60
67
|
--ty-wizard-circle-border-width: 2px;
|
|
61
68
|
|
|
62
|
-
/* Step circle — completed */
|
|
63
|
-
--ty-wizard-completed-bg: var(--ty-wizard-completed-accent);
|
|
64
|
-
--ty-wizard-completed-border: var(--ty-color-success-strong);
|
|
65
|
-
--ty-wizard-completed-color: white;
|
|
66
|
-
--ty-wizard-completed-glow: color-mix(in srgb, var(--ty-wizard-completed-accent) 10%, transparent);
|
|
67
|
-
|
|
68
|
-
/* Step circle — active */
|
|
69
|
-
--ty-wizard-active-bg: var(--ty-wizard-active-accent);
|
|
70
|
-
--ty-wizard-active-border: var(--ty-color-primary-strong);
|
|
71
|
-
--ty-wizard-active-color: white;
|
|
72
|
-
--ty-wizard-active-glow: color-mix(in srgb, var(--ty-wizard-active-accent) 10%, transparent);
|
|
73
|
-
|
|
74
|
-
/* Step circle — pending */
|
|
75
|
-
--ty-wizard-pending-bg: var(--ty-surface-elevated);
|
|
76
|
-
--ty-wizard-pending-border: var(--ty-border);
|
|
77
|
-
--ty-wizard-pending-color: var(--ty-text-soft);
|
|
78
|
-
|
|
79
|
-
/* Step circle — error */
|
|
80
|
-
--ty-wizard-error-bg: var(--ty-wizard-error-accent);
|
|
81
|
-
--ty-wizard-error-border: var(--ty-color-danger-strong);
|
|
82
|
-
--ty-wizard-error-color: white;
|
|
83
|
-
--ty-wizard-error-glow: color-mix(in srgb, var(--ty-wizard-error-accent) 10%, transparent);
|
|
84
|
-
|
|
85
|
-
/* Labels */
|
|
86
|
-
--ty-wizard-label-color: var(--ty-text);
|
|
87
|
-
--ty-wizard-label-active-color: var(--ty-text-strong);
|
|
88
|
-
--ty-wizard-label-inactive-color: var(--ty-text-soft);
|
|
89
|
-
--ty-wizard-label-size: var(--ty-font-sm, 14px);
|
|
90
|
-
--ty-wizard-label-weight: var(--ty-font-semibold, 600);
|
|
91
|
-
|
|
92
|
-
/* Descriptions */
|
|
93
|
-
--ty-wizard-description-color: var(--ty-text-soft);
|
|
94
|
-
--ty-wizard-description-active-color: var(--ty-text);
|
|
95
|
-
--ty-wizard-description-size: var(--ty-font-xs, 12px);
|
|
96
|
-
|
|
97
69
|
/* Panels viewport */
|
|
98
70
|
--ty-wizard-panels-bg: var(--ty-surface-elevated);
|
|
99
71
|
|
|
@@ -221,30 +193,30 @@ export const wizardStyles = `
|
|
|
221
193
|
}
|
|
222
194
|
|
|
223
195
|
.step-circle[data-state="completed"] {
|
|
224
|
-
background: var(--ty-wizard-completed-
|
|
225
|
-
border-color: var(--ty-
|
|
226
|
-
color: var(--ty-
|
|
227
|
-
box-shadow: 0 0 0 4px var(--ty-wizard-completed-
|
|
196
|
+
background: var(--ty-wizard-completed-accent);
|
|
197
|
+
border-color: var(--ty-color-success-strong);
|
|
198
|
+
color: var(--ty-solid-success-fg, white);
|
|
199
|
+
box-shadow: 0 0 0 4px color-mix(in oklab, var(--ty-wizard-completed-accent) 12%, transparent);
|
|
228
200
|
}
|
|
229
201
|
|
|
230
202
|
.step-circle[data-state="active"] {
|
|
231
|
-
background: var(--ty-wizard-active-
|
|
232
|
-
border-color: var(--ty-
|
|
233
|
-
color: var(--ty-
|
|
234
|
-
box-shadow: 0 0 0 4px var(--ty-wizard-active-
|
|
203
|
+
background: var(--ty-wizard-active-accent);
|
|
204
|
+
border-color: var(--ty-color-primary-strong);
|
|
205
|
+
color: var(--ty-solid-primary-fg, white);
|
|
206
|
+
box-shadow: 0 0 0 4px color-mix(in oklab, var(--ty-wizard-active-accent) 12%, transparent);
|
|
235
207
|
}
|
|
236
208
|
|
|
237
209
|
.step-circle[data-state="pending"] {
|
|
238
|
-
background: var(--ty-
|
|
239
|
-
border-color: var(--ty-
|
|
240
|
-
color: var(--ty-
|
|
210
|
+
background: var(--ty-surface-elevated);
|
|
211
|
+
border-color: var(--ty-border);
|
|
212
|
+
color: var(--ty-color-neutral);
|
|
241
213
|
}
|
|
242
214
|
|
|
243
215
|
.step-circle[data-state="error"] {
|
|
244
|
-
background: var(--ty-wizard-error-
|
|
245
|
-
border-color: var(--ty-
|
|
246
|
-
color: var(--ty-
|
|
247
|
-
box-shadow: 0 0 0 4px var(--ty-wizard-error-
|
|
216
|
+
background: var(--ty-wizard-error-accent);
|
|
217
|
+
border-color: var(--ty-color-danger-strong);
|
|
218
|
+
color: var(--ty-solid-danger-fg, white);
|
|
219
|
+
box-shadow: 0 0 0 4px color-mix(in oklab, var(--ty-wizard-error-accent) 12%, transparent);
|
|
248
220
|
}
|
|
249
221
|
|
|
250
222
|
/* ===================================== */
|
|
@@ -263,18 +235,18 @@ export const wizardStyles = `
|
|
|
263
235
|
/* ===================================== */
|
|
264
236
|
|
|
265
237
|
.step-label {
|
|
266
|
-
font-size: var(--ty-
|
|
267
|
-
font-weight: var(--ty-
|
|
268
|
-
color: var(--ty-
|
|
238
|
+
font-size: var(--ty-font-sm, 14px);
|
|
239
|
+
font-weight: var(--ty-font-semibold, 600);
|
|
240
|
+
color: var(--ty-color-neutral);
|
|
269
241
|
transition: color 200ms;
|
|
270
242
|
}
|
|
271
243
|
|
|
272
244
|
.step-indicator[aria-selected="true"] .step-label {
|
|
273
|
-
color: var(--ty-
|
|
245
|
+
color: var(--ty-color-neutral-strong);
|
|
274
246
|
}
|
|
275
247
|
|
|
276
248
|
.step-indicator[aria-selected="false"] .step-label {
|
|
277
|
-
color: var(--ty-
|
|
249
|
+
color: var(--ty-color-neutral);
|
|
278
250
|
}
|
|
279
251
|
|
|
280
252
|
/* ===================================== */
|
|
@@ -282,16 +254,16 @@ export const wizardStyles = `
|
|
|
282
254
|
/* ===================================== */
|
|
283
255
|
|
|
284
256
|
.step-description {
|
|
285
|
-
font-size: var(--ty-
|
|
257
|
+
font-size: var(--ty-font-xs, 12px);
|
|
286
258
|
font-weight: var(--ty-font-normal, 400);
|
|
287
|
-
color: var(--ty-
|
|
259
|
+
color: var(--ty-color-neutral);
|
|
288
260
|
transition: color 200ms;
|
|
289
261
|
text-align: center;
|
|
290
262
|
max-width: 120px;
|
|
291
263
|
}
|
|
292
264
|
|
|
293
265
|
.step-indicator[aria-selected="true"] .step-description {
|
|
294
|
-
color: var(--ty-
|
|
266
|
+
color: var(--ty-color-neutral-bold);
|
|
295
267
|
}
|
|
296
268
|
|
|
297
269
|
/* ===================================== */
|
package/lib/styles/wizard.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"wizard.js","sourceRoot":"","sources":["../../src/styles/wizard.ts"],"names":[],"mappings":"AAAA
|
|
1
|
+
{"version":3,"file":"wizard.js","sourceRoot":"","sources":["../../src/styles/wizard.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AAEH,MAAM,CAAC,MAAM,YAAY,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmU3B,CAAC"}
|
package/lib/version.d.ts
CHANGED
package/lib/version.js
CHANGED