tyrell-components 1.0.0-TC15 → 1.0.0-TC16
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/dist/tyrell.js +1 -1
- package/lib/components/copy.js +1 -1
- package/lib/components/date-picker.js +1 -1
- package/lib/components/dropdown.js +4 -4
- package/lib/components/input.js +3 -3
- package/lib/components/input.js.map +1 -1
- package/lib/components/multiselect.js +2 -2
- package/lib/components/textarea.js +1 -1
- package/lib/components/wizard.js +9 -9
- package/lib/components/wizard.js.map +1 -1
- package/lib/styles/checkbox.d.ts +1 -1
- package/lib/styles/checkbox.d.ts.map +1 -1
- package/lib/styles/date-picker.d.ts +1 -1
- package/lib/styles/date-picker.js +1 -1
- package/lib/styles/dropdown.d.ts +1 -1
- package/lib/styles/dropdown.js +1 -1
- package/lib/styles/input.d.ts +1 -1
- package/lib/styles/input.d.ts.map +1 -1
- package/lib/styles/input.js +2 -2
- package/lib/styles/multiselect.d.ts +1 -1
- package/lib/styles/multiselect.js +1 -1
- package/lib/styles/radio.d.ts +1 -1
- package/lib/styles/radio.d.ts.map +1 -1
- package/lib/styles/step.d.ts +1 -1
- package/lib/styles/step.d.ts.map +1 -1
- package/lib/styles/step.js +3 -3
- package/lib/styles/switch.d.ts +1 -1
- package/lib/styles/switch.d.ts.map +1 -1
- package/lib/styles/textarea.d.ts +1 -1
- package/lib/styles/textarea.js +1 -1
- package/lib/styles/wizard.d.ts +10 -15
- package/lib/styles/wizard.d.ts.map +1 -1
- package/lib/styles/wizard.js +149 -98
- package/lib/styles/wizard.js.map +1 -1
- package/lib/version.d.ts +1 -1
- package/lib/version.js +1 -1
- package/package.json +1 -1
package/lib/styles/switch.d.ts
CHANGED
|
@@ -5,5 +5,5 @@
|
|
|
5
5
|
* Reuses input-container/error-message rules from input styles for label
|
|
6
6
|
* and error layout consistency.
|
|
7
7
|
*/
|
|
8
|
-
export declare const switchStyles = "\n\n:host {\n display: block;\n font-family: var(--ty-font-sans);\n width: 100%;\n}\n\n:host([size=\"xl\"]) {\n font-size: 20px;\n}\n\n\n:host([size=\"xs\"]) {\n font-size: 12px;\n}\n\n\n:host([size=\"sm\"]) {\n font-size: 14px;\n}\n\n:host([size=\"lg\"]) {\n font-size: 18px;\n}\n\n.input-container {\n display: flex;\n flex-direction: column;\n width: 100%;\n box-sizing: border-box;\n}\n\n/* ===== LABEL STYLING ===== */\n\n.input-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 display: flex;\n align-items: center;\n}\n\n/* Required indicator - using SVG icon */\n.required-icon {\n display: inline-flex;\n align-items: center;\n color: var(--ty-color-danger);\n width: 12px;\n height: 12px;\n margin-left: 4px;\n vertical-align: middle;\n}\n\n.required-icon svg {\n width: 100%;\n height: 100%;\n}\n\n/* ===== INPUT WRAPPER WITH SLOTS ===== */\n\n.input-wrapper {\n display: flex;\n align-items: center;\n gap: 0.5rem; /* No gap by default */\n width: 100%;\n box-sizing: border-box;\n border: 1px solid var(--input-border, var(--ty-input-border));\n border-radius: var(--ty-radius-base);\n background: var(--input-bg, var(--input-bg, var(--ty-input-bg)));\n transition: all 0.15s ease-in-out;\n \n /* Default size (md) */\n min-height: 40px;\n padding: 0 12px;\n}\n\n/* Wrapper states */\n.input-wrapper:hover:not(.disabled) {\n border-color: var(--input-border-hover, var(--ty-input-border-hover));\n}\n\n.input-wrapper.focused {\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}\n\n.input-wrapper.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}\n\n/* ===== SLOT STYLING ===== */\n\n/* Style slotted content directly (no wrappers needed) */\n::slotted([slot=\"start\"]),\n::slotted([slot=\"end\"]) {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n color: var(--ty-color-text-soft);\n}\n\n/* Icon sizing for slotted icons */\n::slotted(ty-icon) {\n width: 1em;\n height: 1em;\n flex-shrink: 0;\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 wrapper */\n.input-wrapper.error {\n border-color: var(--ty-color-danger);\n background: var(--ty-bg-danger-soft);\n}\n\n.input-wrapper.error.focused {\n border-color: var(--ty-color-danger-mild);\n box-shadow: 0 0 0 3px var(--input-shadow-focus, var(--ty-input-shadow-focus));\n}\n\n/* ===== INPUT BASE STYLING ===== */\n\ninput {\n /* Reset and base styles \u2014 Linear-paired typography */\n flex: 1;\n min-width: 0;\n box-sizing: border-box;\n border: none;\n outline: none;\n background: transparent;\n color: var(--input-color, var(--ty-input-color));\n font-family: inherit;\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 padding: 0;\n margin: 0;\n}\n\n/* Remove number input spinner arrows */\ninput[type=\"number\"]::-webkit-outer-spin-button,\ninput[type=\"number\"]::-webkit-inner-spin-button {\n -webkit-appearance: none;\n margin: 0;\n}\n\ninput[type=\"number\"] {\n -moz-appearance: textfield;\n}\n\n/* Disabled state */\ninput:disabled {\n cursor: not-allowed;\n color: var(--input-disabled-color, var(--ty-input-disabled-color));\n}\n\n/* Placeholder styling */\ninput::placeholder {\n color: var(--input-placeholder, var(--ty-input-placeholder));\n font-weight: 400;\n}\n\n/* ===== SIZE MODIFIERS ===== */\n\n/* Extra Small */\n.input-wrapper.xs {\n min-height: 32px;\n padding: 0 8px;\n border-radius: var(--ty-input-radius-xs, var(--ty-radius-base));\n}\n\n.input-wrapper.xs input {\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 */\n.input-wrapper.sm {\n min-height: 36px;\n padding: 0 10px;\n border-radius: var(--ty-input-radius-sm, var(--ty-radius-base));\n}\n\n.input-wrapper.sm input {\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) */\n.input-wrapper.md {\n min-height: 40px;\n padding: 0 12px;\n border-radius: var(--ty-input-radius-md, var(--ty-radius-base));\n}\n\n.input-wrapper.md input {\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 */\n.input-wrapper.lg {\n min-height: 44px;\n padding: 0 14px;\n border-radius: var(--ty-input-radius-lg, var(--ty-radius-base));\n}\n\n.input-wrapper.lg input {\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 */\n.input-wrapper.xl {\n min-height: 48px;\n padding: 0 16px;\n border-radius: var(--ty-input-radius-xl, var(--ty-radius-base));\n}\n\n.input-wrapper.xl input {\n font-size: var(--ty-font-lg);\n line-height: var(--ty-leading-lg);\n letter-spacing: var(--ty-tracking-lg);\n}\n\n/* ===== SEMANTIC FLAVOR MODIFIERS ===== */\n\n/* Primary */\n.input-wrapper.primary {\n border-color: var(--ty-input-primary-border, var(--ty-color-primary));\n}\n\n.input-wrapper.primary:hover:not(.disabled) {\n border-color: var(--ty-color-primary-mild);\n}\n\n.input-wrapper.primary.focused {\n border-color: var(--ty-color-primary-mild);\n box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);\n}\n\n/* Secondary */\n.input-wrapper.secondary {\n border-color: var(--ty-input-secondary-border, var(--ty-color-secondary));\n}\n\n.input-wrapper.secondary.focused {\n border-color: var(--ty-color-secondary-mild);\n box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1);\n}\n\n/* Success */\n.input-wrapper.success {\n border-color: var(--ty-input-success-border);\n}\n\n.input-wrapper.success:hover:not(.disabled) {\n border-color: var(--ty-color-success-mild);\n}\n\n.input-wrapper.success.focused {\n border-color: var(--ty-color-success-mild);\n box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);\n}\n\n/* Danger */\n.input-wrapper.danger {\n border-color: var(--ty-input-danger-border);\n}\n\n.input-wrapper.danger:hover:not(.disabled) {\n border-color: var(--ty-color-danger-mild);\n}\n\n.input-wrapper.danger.focused {\n border-color: var(--ty-color-danger-mild);\n box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);\n}\n\n/* Warning */\n.input-wrapper.warning {\n border-color: var(--ty-input-warning-border);\n}\n\n.input-wrapper.warning:hover:not(.disabled) {\n border-color: var(--ty-color-warning-mild);\n}\n\n.input-wrapper.warning.focused {\n border-color: var(--ty-color-warning-mild);\n box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.1);\n}\n\n/* Neutral (default) */\n.input-wrapper.neutral.focused {\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}\n\n/* ===== ACCESSIBILITY ENHANCEMENTS ===== */\n\ninput:focus-visible {\n outline: none;\n}\n\n/* High contrast mode support */\n@media (prefers-contrast: high) {\n .input-wrapper {\n border-width: 2px;\n }\n}\n\n/* Reduced motion support */\n@media (prefers-reduced-motion: reduce) {\n .input-wrapper {\n transition: none;\n }\n}\n\n/* ===== RESPONSIVE BEHAVIOR ===== */\n\n@media (max-width: 640px) {\n .input-wrapper.lg {\n min-height: 40px;\n padding: 0 12px;\n }\n\n .input-wrapper.lg input {\n font-size: var(--ty-font-sm);\n line-height: var(--ty-leading-sm);\n letter-spacing: var(--ty-tracking-sm);\n }\n\n .input-wrapper.xl {\n min-height: 44px;\n padding: 0 14px;\n }\n\n .input-wrapper.xl input {\n font-size: var(--ty-font-base);\n line-height: var(--ty-leading-base);\n letter-spacing: var(--ty-tracking-base);\n }\n}\n\n@media (max-width: 480px) {\n .input-wrapper.xl {\n min-height: 40px;\n padding: 0 12px;\n }\n\n .input-wrapper.xl input {\n font-size: var(--ty-font-sm);\n line-height: var(--ty-leading-sm);\n letter-spacing: var(--ty-tracking-sm);\n }\n}\n\n/* ===== CHECKBOX STYLING ===== */\n\n.checkbox-container {\n display: inline-flex;\n align-items: center;\n outline: none;\n transition: all 0.15s ease-in-out;\n user-select: none;\n cursor: pointer;\n\n /* Default size (md) - matching input sizes */\n border-radius: 6px;\n gap: var(--ty-spacing-1);\n color: var(--ty-text-faint);\n}\n\n.checkbox-container[aria-checked=\"true\"] {\n color: var(--ty-text);\n}\n\n/* Ensure slotted label content inherits the color from container */\n.checkbox-container ::slotted(*) {\n color: inherit;\n transition: color 0.15s ease-in-out;\n}\n\n.checkbox-container label {\n cursor: pointer;\n}\n\n.checkbox-container label {\n font-size: var(--ty-font-sm);\n}\n\n.checkbox-container.sm label {\n font-size: var(--ty-font-xs);\n}\n\n.checkbox-container.lg label {\n font-size: var(--ty-font-base);\n}\n\n.checkbox-container.xl label {\n font-size: var(--ty-font-lg);\n}\n\n/* Checkbox input container - different layout for checkboxes */\n.input-container.checkbox-layout {\n flex-direction: row;\n align-items: center;\n gap: 12px;\n width: auto;\n /* Don't force full width for checkboxes */\n}\n\n.input-container.checkbox-layout .input-label {\n margin-bottom: 0;\n padding-left: 0;\n order: 2;\n cursor: pointer;\n flex: 1;\n}\n\n.input-container.checkbox-layout .checkbox-container {\n order: 1;\n flex-shrink: 0;\n}\n\n/* Error message positioning for checkboxes */\n.input-container.checkbox-layout .error-message {\n padding-left: 0;\n margin-left: 52px;\n /* Align with label text */\n}\n\n.checkbox-icon {\n display: flex;\n align-items: center;\n justify-content: center;\n color: inherit;\n transition: color 0.15s ease-in-out;\n pointer-events: none;\n /* Let the container handle the click */\n}\n\n.checkbox-container svg {\n width: 24px;\n height: 24px;\n}\n\n/* ===== CHECKBOX SIZE MODIFIERS ===== */\n\n.checkbox-container.xs svg {\n width: 16px;\n height: 16px;\n}\n\n/* Adjust error message margin for XS */\n.input-container.checkbox-layout .checkbox-container.xs~.error-message {\n margin-left: 44px;\n}\n\n\n.checkbox-container.sm svg {\n width: 20px;\n height: 20px;\n}\n\n/* Adjust error message margin for SM */\n.input-container.checkbox-layout .checkbox-container.sm~.error-message {\n margin-left: 48px;\n}\n\n\n.checkbox-container.md svg {\n width: 24px;\n height: 24px;\n}\n\n\n.checkbox-container.lg svg {\n width: 28px;\n height: 28px;\n}\n\n.checkbox-container.xl svg {\n width: 32px;\n height: 32px;\n}\n\n\n.checkbox-container.xl svg {\n font-size: 20px;\n}\n\n/* Adjust error message margin for LG */\n.input-container.checkbox-layout .checkbox-container.lg~.error-message {\n margin-left: 56px;\n}\n\n\n/* Adjust error message margin for XL */\n.input-container.checkbox-layout .checkbox-container.xl~.error-message {\n margin-left: 60px;\n /* 48px + 12px gap */\n}\n\n/* ===== CHECKBOX SEMANTIC FLAVORS ===== */\n\n.checkbox-container.primary {\n color: var(--ty-color-primary-soft);\n}\n\n\n.checkbox-container.primary[aria-checked=\"true\"] {\n color: var(--ty-color-primary);\n}\n\n.checkbox-container.secondary {\n color: var(--ty-color-secondary-soft);\n}\n\n\n.checkbox-container.secondary[aria-checked=\"true\"] {\n color: var(--ty-color-secondary);\n}\n\n.checkbox-container.success {\n color: var(--ty-color-success-soft);\n}\n\n\n.checkbox-container.success[aria-checked=\"true\"] {\n color: var(--ty-color-success);\n}\n\n.checkbox-container.danger {\n color: var(--ty-color-danger-soft);\n}\n\n.checkbox-container.danger[aria-checked=\"true\"] {\n color: var(--ty-color-danger);\n}\n\n.checkbox-container.warning {\n color: var(--ty-color-warning-soft);\n}\n\n.checkbox-container.warning[aria-checked=\"true\"] {\n color: var(--ty-color-warning);\n}\n\n\n/* Neutral */\n.checkbox-container.neutral {\n color: var(--ty-color-neutral-soft);\n}\n\n.checkbox-container.neutral[aria-checked=\"true\"] {\n color: var(--ty-color-neutral);\n}\n\n/* Disabled state */\n.checkbox-container.disabled {\n pointer-events: none;\n cursor: not-allowed;\n opacity: 0.5;\n}\n\n.checkbox-container.disabled .checkbox-icon {\n color: var(--ty-color-neutral-faint);\n}\n\n/* Error state */\n.checkbox-container.error .checkbox-icon {\n color: var(--ty-color-danger);\n}\n\n.checkbox-container.error:focus {\n box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);\n}\n\n/* Required state */\n.checkbox-container.required .checkbox-icon {\n /* Could add specific styling for required checkboxes */\n}\n\n/* ===== RESPONSIVE CHECKBOX BEHAVIOR ===== */\n\n@container (max-width: 480px) {\n .checkbox-container.lg {\n width: 40px;\n height: 40px;\n }\n\n .checkbox-container.lg svg {\n width: 20px;\n height: 20px;\n }\n\n .checkbox-container.xl {\n width: 44px;\n height: 44px;\n }\n\n .checkbox-container.xl svg {\n width: 22px;\n height: 22px;\n }\n}\n\n@container (max-width: 320px) {\n .checkbox-container.xl {\n width: 40px;\n height: 40px;\n }\n\n .checkbox-container.xl svg {\n width: 20px;\n height: 20px;\n }\n}\n\n/* Fallback for browsers without container query support */\n@media (max-width: 640px) {\n .checkbox-container.lg {\n width: 40px;\n height: 40px;\n }\n\n .checkbox-container.lg svg {\n width: 20px;\n height: 20px;\n }\n\n .checkbox-container.xl {\n width: 44px;\n height: 44px;\n }\n\n .checkbox-container.xl svg {\n width: 22px;\n height: 22px;\n }\n}\n\n@media (max-width: 480px) {\n .checkbox-container.xl {\n width: 40px;\n height: 40px;\n }\n\n .checkbox-container.xl svg {\n width: 20px;\n height: 20px;\n }\n}\n\n\n/* Override input's :host so the switch sizes to its visual */\n:host {\n display: inline-flex;\n width: auto;\n vertical-align: middle;\n}\n\n/* ===== SWITCH CONTAINER (just the visual) ===== */\n.switch-container {\n display: inline-block;\n cursor: pointer;\n user-select: none;\n outline: none;\n vertical-align: middle;\n}\n\n.switch-container.disabled {\n cursor: not-allowed;\n opacity: 0.55;\n}\n\n.switch-container:focus-visible .switch-track,\n.switch-container.focused .switch-track {\n box-shadow: 0 0 0 3px var(--ty-input-shadow-focus);\n}\n\n/* ===== TRACK ===== */\n.switch-track {\n position: relative;\n flex-shrink: 0;\n width: 36px;\n height: 20px;\n border-radius: 999px;\n background: var(--ty-color-neutral-soft, var(--ty-input-border));\n transition: background-color 0.18s ease-in-out;\n box-sizing: border-box;\n}\n\n/* ===== THUMB ===== */\n.switch-thumb {\n position: absolute;\n top: 2px;\n left: 2px;\n width: 16px;\n height: 16px;\n border-radius: 50%;\n background: white;\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);\n transition: transform 0.18s ease-in-out, background-color 0.18s ease-in-out;\n}\n\n/* ===== CHECKED STATE ===== */\n.switch-container[aria-checked=\"true\"] .switch-track {\n background: var(--ty-color-primary);\n}\n\n.switch-container[aria-checked=\"true\"] .switch-thumb {\n transform: translateX(16px);\n}\n\n/* ===== SIZE VARIANTS ===== */\n.switch-container.xs .switch-track { width: 26px; height: 14px; }\n.switch-container.xs .switch-thumb { width: 10px; height: 10px; }\n.switch-container.xs[aria-checked=\"true\"] .switch-thumb { transform: translateX(12px); }\n\n.switch-container.sm .switch-track { width: 30px; height: 16px; }\n.switch-container.sm .switch-thumb { width: 12px; height: 12px; }\n.switch-container.sm[aria-checked=\"true\"] .switch-thumb { transform: translateX(14px); }\n\n/* md is default \u2014 already set above */\n\n.switch-container.lg .switch-track { width: 44px; height: 24px; }\n.switch-container.lg .switch-thumb { width: 20px; height: 20px; }\n.switch-container.lg[aria-checked=\"true\"] .switch-thumb { transform: translateX(20px); }\n\n.switch-container.xl .switch-track { width: 52px; height: 28px; }\n.switch-container.xl .switch-thumb { width: 24px; height: 24px; }\n.switch-container.xl[aria-checked=\"true\"] .switch-thumb { transform: translateX(24px); }\n\n/* ===== FLAVOR VARIANTS (checked-state colors) ===== */\n.switch-container.primary[aria-checked=\"true\"] .switch-track { background: var(--ty-color-primary); }\n.switch-container.secondary[aria-checked=\"true\"] .switch-track { background: var(--ty-color-secondary); }\n.switch-container.success[aria-checked=\"true\"] .switch-track { background: var(--ty-color-success); }\n.switch-container.danger[aria-checked=\"true\"] .switch-track { background: var(--ty-color-danger); }\n.switch-container.warning[aria-checked=\"true\"] .switch-track { background: var(--ty-color-warning); }\n.switch-container.neutral[aria-checked=\"true\"] .switch-track { background: var(--ty-color-neutral); }\n\n";
|
|
8
|
+
export declare const switchStyles = "\n\n:host {\n display: block;\n font-family: var(--ty-font-sans);\n width: 100%;\n}\n\n:host([size=\"xl\"]) {\n font-size: 20px;\n}\n\n\n:host([size=\"xs\"]) {\n font-size: 12px;\n}\n\n\n:host([size=\"sm\"]) {\n font-size: 14px;\n}\n\n:host([size=\"lg\"]) {\n font-size: 18px;\n}\n\n.input-container {\n display: flex;\n flex-direction: column;\n width: 100%;\n box-sizing: border-box;\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 display: flex;\n align-items: center;\n}\n\n/* Required indicator - using SVG icon */\n.required-icon {\n display: inline-flex;\n align-items: center;\n color: var(--ty-color-danger);\n width: 12px;\n height: 12px;\n margin-left: 4px;\n vertical-align: middle;\n}\n\n.required-icon svg {\n width: 100%;\n height: 100%;\n}\n\n/* ===== INPUT WRAPPER WITH SLOTS ===== */\n\n.input-wrapper {\n display: flex;\n align-items: center;\n gap: 0.5rem; /* No gap by default */\n width: 100%;\n box-sizing: border-box;\n border: 1px solid var(--input-border, var(--ty-input-border));\n border-radius: var(--ty-radius-base);\n background: var(--input-bg, var(--input-bg, var(--ty-input-bg)));\n transition: all 0.15s ease-in-out;\n \n /* Default size (md) */\n min-height: 40px;\n padding: 0 12px;\n}\n\n/* Wrapper states */\n.input-wrapper:hover:not(.disabled) {\n border-color: var(--input-border-hover, var(--ty-input-border-hover));\n}\n\n.input-wrapper.focused {\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}\n\n.input-wrapper.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}\n\n/* ===== SLOT STYLING ===== */\n\n/* Style slotted content directly (no wrappers needed) */\n::slotted([slot=\"start\"]),\n::slotted([slot=\"end\"]) {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n color: var(--ty-color-text-soft);\n}\n\n/* Icon sizing for slotted icons */\n::slotted(ty-icon) {\n width: 1em;\n height: 1em;\n flex-shrink: 0;\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 wrapper */\n.input-wrapper.error {\n border-color: var(--ty-color-danger);\n background: var(--ty-bg-danger-soft);\n}\n\n.input-wrapper.error.focused {\n border-color: var(--ty-color-danger-mild);\n box-shadow: 0 0 0 3px var(--input-shadow-focus, var(--ty-input-shadow-focus));\n}\n\n/* ===== INPUT BASE STYLING ===== */\n\ninput {\n /* Reset and base styles \u2014 Linear-paired typography */\n flex: 1;\n min-width: 0;\n box-sizing: border-box;\n border: none;\n outline: none;\n background: transparent;\n color: var(--input-color, var(--ty-input-color));\n font-family: inherit;\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 padding: 0;\n margin: 0;\n}\n\n/* Remove number input spinner arrows */\ninput[type=\"number\"]::-webkit-outer-spin-button,\ninput[type=\"number\"]::-webkit-inner-spin-button {\n -webkit-appearance: none;\n margin: 0;\n}\n\ninput[type=\"number\"] {\n -moz-appearance: textfield;\n}\n\n/* Disabled state */\ninput:disabled {\n cursor: not-allowed;\n color: var(--input-disabled-color, var(--ty-input-disabled-color));\n}\n\n/* Placeholder styling */\ninput::placeholder {\n color: var(--input-placeholder, var(--ty-input-placeholder));\n font-weight: 400;\n}\n\n/* ===== SIZE MODIFIERS ===== */\n\n/* Extra Small */\n.input-wrapper.xs {\n min-height: 32px;\n padding: 0 8px;\n border-radius: var(--ty-input-radius-xs, var(--ty-radius-base));\n}\n\n.input-wrapper.xs input {\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 */\n.input-wrapper.sm {\n min-height: 36px;\n padding: 0 10px;\n border-radius: var(--ty-input-radius-sm, var(--ty-radius-base));\n}\n\n.input-wrapper.sm input {\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) */\n.input-wrapper.md {\n min-height: 40px;\n padding: 0 12px;\n border-radius: var(--ty-input-radius-md, var(--ty-radius-base));\n}\n\n.input-wrapper.md input {\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 */\n.input-wrapper.lg {\n min-height: 44px;\n padding: 0 14px;\n border-radius: var(--ty-input-radius-lg, var(--ty-radius-base));\n}\n\n.input-wrapper.lg input {\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 */\n.input-wrapper.xl {\n min-height: 48px;\n padding: 0 16px;\n border-radius: var(--ty-input-radius-xl, var(--ty-radius-base));\n}\n\n.input-wrapper.xl input {\n font-size: var(--ty-font-lg);\n line-height: var(--ty-leading-lg);\n letter-spacing: var(--ty-tracking-lg);\n}\n\n/* ===== SEMANTIC FLAVOR MODIFIERS ===== */\n\n/* Primary */\n.input-wrapper.primary {\n border-color: var(--ty-input-primary-border, var(--ty-color-primary));\n}\n\n.input-wrapper.primary:hover:not(.disabled) {\n border-color: var(--ty-color-primary-mild);\n}\n\n.input-wrapper.primary.focused {\n border-color: var(--ty-color-primary-mild);\n box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);\n}\n\n/* Secondary */\n.input-wrapper.secondary {\n border-color: var(--ty-input-secondary-border, var(--ty-color-secondary));\n}\n\n.input-wrapper.secondary.focused {\n border-color: var(--ty-color-secondary-mild);\n box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1);\n}\n\n/* Success */\n.input-wrapper.success {\n border-color: var(--ty-input-success-border);\n}\n\n.input-wrapper.success:hover:not(.disabled) {\n border-color: var(--ty-color-success-mild);\n}\n\n.input-wrapper.success.focused {\n border-color: var(--ty-color-success-mild);\n box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);\n}\n\n/* Danger */\n.input-wrapper.danger {\n border-color: var(--ty-input-danger-border);\n}\n\n.input-wrapper.danger:hover:not(.disabled) {\n border-color: var(--ty-color-danger-mild);\n}\n\n.input-wrapper.danger.focused {\n border-color: var(--ty-color-danger-mild);\n box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);\n}\n\n/* Warning */\n.input-wrapper.warning {\n border-color: var(--ty-input-warning-border);\n}\n\n.input-wrapper.warning:hover:not(.disabled) {\n border-color: var(--ty-color-warning-mild);\n}\n\n.input-wrapper.warning.focused {\n border-color: var(--ty-color-warning-mild);\n box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.1);\n}\n\n/* Neutral (default) */\n.input-wrapper.neutral.focused {\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}\n\n/* ===== ACCESSIBILITY ENHANCEMENTS ===== */\n\ninput:focus-visible {\n outline: none;\n}\n\n/* High contrast mode support */\n@media (prefers-contrast: high) {\n .input-wrapper {\n border-width: 2px;\n }\n}\n\n/* Reduced motion support */\n@media (prefers-reduced-motion: reduce) {\n .input-wrapper {\n transition: none;\n }\n}\n\n/* ===== RESPONSIVE BEHAVIOR ===== */\n\n@media (max-width: 640px) {\n .input-wrapper.lg {\n min-height: 40px;\n padding: 0 12px;\n }\n\n .input-wrapper.lg input {\n font-size: var(--ty-font-sm);\n line-height: var(--ty-leading-sm);\n letter-spacing: var(--ty-tracking-sm);\n }\n\n .input-wrapper.xl {\n min-height: 44px;\n padding: 0 14px;\n }\n\n .input-wrapper.xl input {\n font-size: var(--ty-font-base);\n line-height: var(--ty-leading-base);\n letter-spacing: var(--ty-tracking-base);\n }\n}\n\n@media (max-width: 480px) {\n .input-wrapper.xl {\n min-height: 40px;\n padding: 0 12px;\n }\n\n .input-wrapper.xl input {\n font-size: var(--ty-font-sm);\n line-height: var(--ty-leading-sm);\n letter-spacing: var(--ty-tracking-sm);\n }\n}\n\n/* ===== CHECKBOX STYLING ===== */\n\n.checkbox-container {\n display: inline-flex;\n align-items: center;\n outline: none;\n transition: all 0.15s ease-in-out;\n user-select: none;\n cursor: pointer;\n\n /* Default size (md) - matching input sizes */\n border-radius: 6px;\n gap: var(--ty-spacing-1);\n color: var(--ty-text-faint);\n}\n\n.checkbox-container[aria-checked=\"true\"] {\n color: var(--ty-text);\n}\n\n/* Ensure slotted label content inherits the color from container */\n.checkbox-container ::slotted(*) {\n color: inherit;\n transition: color 0.15s ease-in-out;\n}\n\n.checkbox-container label {\n cursor: pointer;\n}\n\n.checkbox-container label {\n font-size: var(--ty-font-sm);\n}\n\n.checkbox-container.sm label {\n font-size: var(--ty-font-xs);\n}\n\n.checkbox-container.lg label {\n font-size: var(--ty-font-base);\n}\n\n.checkbox-container.xl label {\n font-size: var(--ty-font-lg);\n}\n\n/* Checkbox input container - different layout for checkboxes */\n.input-container.checkbox-layout {\n flex-direction: row;\n align-items: center;\n gap: 12px;\n width: auto;\n /* Don't force full width for checkboxes */\n}\n\n.input-container.checkbox-layout .ty-field-label {\n margin-bottom: 0;\n padding-left: 0;\n order: 2;\n cursor: pointer;\n flex: 1;\n}\n\n.input-container.checkbox-layout .checkbox-container {\n order: 1;\n flex-shrink: 0;\n}\n\n/* Error message positioning for checkboxes */\n.input-container.checkbox-layout .error-message {\n padding-left: 0;\n margin-left: 52px;\n /* Align with label text */\n}\n\n.checkbox-icon {\n display: flex;\n align-items: center;\n justify-content: center;\n color: inherit;\n transition: color 0.15s ease-in-out;\n pointer-events: none;\n /* Let the container handle the click */\n}\n\n.checkbox-container svg {\n width: 24px;\n height: 24px;\n}\n\n/* ===== CHECKBOX SIZE MODIFIERS ===== */\n\n.checkbox-container.xs svg {\n width: 16px;\n height: 16px;\n}\n\n/* Adjust error message margin for XS */\n.input-container.checkbox-layout .checkbox-container.xs~.error-message {\n margin-left: 44px;\n}\n\n\n.checkbox-container.sm svg {\n width: 20px;\n height: 20px;\n}\n\n/* Adjust error message margin for SM */\n.input-container.checkbox-layout .checkbox-container.sm~.error-message {\n margin-left: 48px;\n}\n\n\n.checkbox-container.md svg {\n width: 24px;\n height: 24px;\n}\n\n\n.checkbox-container.lg svg {\n width: 28px;\n height: 28px;\n}\n\n.checkbox-container.xl svg {\n width: 32px;\n height: 32px;\n}\n\n\n.checkbox-container.xl svg {\n font-size: 20px;\n}\n\n/* Adjust error message margin for LG */\n.input-container.checkbox-layout .checkbox-container.lg~.error-message {\n margin-left: 56px;\n}\n\n\n/* Adjust error message margin for XL */\n.input-container.checkbox-layout .checkbox-container.xl~.error-message {\n margin-left: 60px;\n /* 48px + 12px gap */\n}\n\n/* ===== CHECKBOX SEMANTIC FLAVORS ===== */\n\n.checkbox-container.primary {\n color: var(--ty-color-primary-soft);\n}\n\n\n.checkbox-container.primary[aria-checked=\"true\"] {\n color: var(--ty-color-primary);\n}\n\n.checkbox-container.secondary {\n color: var(--ty-color-secondary-soft);\n}\n\n\n.checkbox-container.secondary[aria-checked=\"true\"] {\n color: var(--ty-color-secondary);\n}\n\n.checkbox-container.success {\n color: var(--ty-color-success-soft);\n}\n\n\n.checkbox-container.success[aria-checked=\"true\"] {\n color: var(--ty-color-success);\n}\n\n.checkbox-container.danger {\n color: var(--ty-color-danger-soft);\n}\n\n.checkbox-container.danger[aria-checked=\"true\"] {\n color: var(--ty-color-danger);\n}\n\n.checkbox-container.warning {\n color: var(--ty-color-warning-soft);\n}\n\n.checkbox-container.warning[aria-checked=\"true\"] {\n color: var(--ty-color-warning);\n}\n\n\n/* Neutral */\n.checkbox-container.neutral {\n color: var(--ty-color-neutral-soft);\n}\n\n.checkbox-container.neutral[aria-checked=\"true\"] {\n color: var(--ty-color-neutral);\n}\n\n/* Disabled state */\n.checkbox-container.disabled {\n pointer-events: none;\n cursor: not-allowed;\n opacity: 0.5;\n}\n\n.checkbox-container.disabled .checkbox-icon {\n color: var(--ty-color-neutral-faint);\n}\n\n/* Error state */\n.checkbox-container.error .checkbox-icon {\n color: var(--ty-color-danger);\n}\n\n.checkbox-container.error:focus {\n box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);\n}\n\n/* Required state */\n.checkbox-container.required .checkbox-icon {\n /* Could add specific styling for required checkboxes */\n}\n\n/* ===== RESPONSIVE CHECKBOX BEHAVIOR ===== */\n\n@container (max-width: 480px) {\n .checkbox-container.lg {\n width: 40px;\n height: 40px;\n }\n\n .checkbox-container.lg svg {\n width: 20px;\n height: 20px;\n }\n\n .checkbox-container.xl {\n width: 44px;\n height: 44px;\n }\n\n .checkbox-container.xl svg {\n width: 22px;\n height: 22px;\n }\n}\n\n@container (max-width: 320px) {\n .checkbox-container.xl {\n width: 40px;\n height: 40px;\n }\n\n .checkbox-container.xl svg {\n width: 20px;\n height: 20px;\n }\n}\n\n/* Fallback for browsers without container query support */\n@media (max-width: 640px) {\n .checkbox-container.lg {\n width: 40px;\n height: 40px;\n }\n\n .checkbox-container.lg svg {\n width: 20px;\n height: 20px;\n }\n\n .checkbox-container.xl {\n width: 44px;\n height: 44px;\n }\n\n .checkbox-container.xl svg {\n width: 22px;\n height: 22px;\n }\n}\n\n@media (max-width: 480px) {\n .checkbox-container.xl {\n width: 40px;\n height: 40px;\n }\n\n .checkbox-container.xl svg {\n width: 20px;\n height: 20px;\n }\n}\n\n\n/* Override input's :host so the switch sizes to its visual */\n:host {\n display: inline-flex;\n width: auto;\n vertical-align: middle;\n}\n\n/* ===== SWITCH CONTAINER (just the visual) ===== */\n.switch-container {\n display: inline-block;\n cursor: pointer;\n user-select: none;\n outline: none;\n vertical-align: middle;\n}\n\n.switch-container.disabled {\n cursor: not-allowed;\n opacity: 0.55;\n}\n\n.switch-container:focus-visible .switch-track,\n.switch-container.focused .switch-track {\n box-shadow: 0 0 0 3px var(--ty-input-shadow-focus);\n}\n\n/* ===== TRACK ===== */\n.switch-track {\n position: relative;\n flex-shrink: 0;\n width: 36px;\n height: 20px;\n border-radius: 999px;\n background: var(--ty-color-neutral-soft, var(--ty-input-border));\n transition: background-color 0.18s ease-in-out;\n box-sizing: border-box;\n}\n\n/* ===== THUMB ===== */\n.switch-thumb {\n position: absolute;\n top: 2px;\n left: 2px;\n width: 16px;\n height: 16px;\n border-radius: 50%;\n background: white;\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);\n transition: transform 0.18s ease-in-out, background-color 0.18s ease-in-out;\n}\n\n/* ===== CHECKED STATE ===== */\n.switch-container[aria-checked=\"true\"] .switch-track {\n background: var(--ty-color-primary);\n}\n\n.switch-container[aria-checked=\"true\"] .switch-thumb {\n transform: translateX(16px);\n}\n\n/* ===== SIZE VARIANTS ===== */\n.switch-container.xs .switch-track { width: 26px; height: 14px; }\n.switch-container.xs .switch-thumb { width: 10px; height: 10px; }\n.switch-container.xs[aria-checked=\"true\"] .switch-thumb { transform: translateX(12px); }\n\n.switch-container.sm .switch-track { width: 30px; height: 16px; }\n.switch-container.sm .switch-thumb { width: 12px; height: 12px; }\n.switch-container.sm[aria-checked=\"true\"] .switch-thumb { transform: translateX(14px); }\n\n/* md is default \u2014 already set above */\n\n.switch-container.lg .switch-track { width: 44px; height: 24px; }\n.switch-container.lg .switch-thumb { width: 20px; height: 20px; }\n.switch-container.lg[aria-checked=\"true\"] .switch-thumb { transform: translateX(20px); }\n\n.switch-container.xl .switch-track { width: 52px; height: 28px; }\n.switch-container.xl .switch-thumb { width: 24px; height: 24px; }\n.switch-container.xl[aria-checked=\"true\"] .switch-thumb { transform: translateX(24px); }\n\n/* ===== FLAVOR VARIANTS (checked-state colors) ===== */\n.switch-container.primary[aria-checked=\"true\"] .switch-track { background: var(--ty-color-primary); }\n.switch-container.secondary[aria-checked=\"true\"] .switch-track { background: var(--ty-color-secondary); }\n.switch-container.success[aria-checked=\"true\"] .switch-track { background: var(--ty-color-success); }\n.switch-container.danger[aria-checked=\"true\"] .switch-track { background: var(--ty-color-danger); }\n.switch-container.warning[aria-checked=\"true\"] .switch-track { background: var(--ty-color-warning); }\n.switch-container.neutral[aria-checked=\"true\"] .switch-track { background: var(--ty-color-neutral); }\n\n";
|
|
9
9
|
//# sourceMappingURL=switch.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"switch.d.ts","sourceRoot":"","sources":["../../src/styles/switch.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAIH,eAAO,MAAM,YAAY,
|
|
1
|
+
{"version":3,"file":"switch.d.ts","sourceRoot":"","sources":["../../src/styles/switch.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAIH,eAAO,MAAM,YAAY,28hBA0FxB,CAAC"}
|
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.
|
|
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-mild);\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
package/lib/styles/wizard.d.ts
CHANGED
|
@@ -1,25 +1,20 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Wizard Component Styles
|
|
3
3
|
*
|
|
4
|
-
* Styles for the ty-wizard container component including:
|
|
5
|
-
* - Flexbox layout with step indicators and content carousel
|
|
6
|
-
* - Progress line with animated completion overlay
|
|
7
|
-
* - Step circles with completed/active/pending states
|
|
8
|
-
* - Carousel viewport with transform animations
|
|
9
|
-
* - Responsive design with prefers-reduced-motion support
|
|
10
|
-
* - Fully customizable via CSS Parts (::part)
|
|
11
|
-
*
|
|
12
|
-
* Uses global design system tokens (no component-specific variables):
|
|
13
|
-
* - Surfaces: --ty-surface-floating, --ty-surface-content, --ty-surface-elevated
|
|
14
|
-
* - Colors: --ty-color-success, --ty-color-primary, --ty-color-danger
|
|
15
|
-
* - Borders: --ty-border, --ty-border-soft
|
|
16
|
-
* - Text: --ty-text, --ty-text-soft
|
|
17
|
-
*
|
|
18
4
|
* CSS Parts (for styling via ::part):
|
|
19
5
|
* - indicators-wrapper: The header containing step indicators
|
|
20
6
|
* - progress-line: The background progress track
|
|
21
7
|
* - step-circle: Individual step circle indicators
|
|
22
8
|
* - panels-container: The content viewport
|
|
9
|
+
*
|
|
10
|
+
* Theming — two override granularities:
|
|
11
|
+
*
|
|
12
|
+
* 1. Accent aliases (broad retheming — one variable shifts a whole state):
|
|
13
|
+
* --ty-wizard-active-accent, --ty-wizard-completed-accent,
|
|
14
|
+
* --ty-wizard-error-accent, --ty-wizard-pending-accent
|
|
15
|
+
*
|
|
16
|
+
* 2. Fine-grained tokens (surgical control — see :host block below):
|
|
17
|
+
* --ty-wizard-{region}-{property}
|
|
23
18
|
*/
|
|
24
|
-
export declare const wizardStyles = "\n:host {\n display: block;\n width: var(--wizard-width, 100%);\n height: var(--wizard-height, 700px);\n box-sizing: border-box;\n /* Note: --step-circle-size is NOT set here to allow inheritance from light DOM.\n Use fallbacks in var() calls instead. Set on ty-wizard element to customize. */\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: 12px;\n border: 1px solid var(--ty-border);\n background: var(--ty-surface-floating);\n box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);\n overflow: hidden;\n}\n\n/* ===================================== */\n/* Step Indicators Wrapper */\n/* Expose as CSS Part for full styling control */\n/* ===================================== */\n\n.step-indicators-wrapper {\n display: flex;\n flex-direction: column;\n flex-shrink: 0;\n position: relative;\n padding: 24px 24px 16px;\n border-bottom: 1px solid var(--ty-border-soft, var(--ty-border));\n background: var(--ty-surface-content);\n}\n\n/* ===================================== */\n/* Progress Line (behind step circles) */\n/* Expose as CSS Part for custom styling */\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 are at: 50%/N, 150%/N, 250%/N, ... from left.\n * Line spans from first center (50%/N) to last center (100% - 50%/N).\n * Inset = 50% / step-count from each side.\n */\n left: calc(50% / var(--step-count, 4));\n right: calc(50% / var(--step-count, 4));\n /* Vertically center with step circles - uses circle size variable */\n top: calc(var(--step-circle-size, 32px) / 2 - 1px);\n height: 2px;\n background: var(--ty-border);\n z-index: 0;\n pointer-events: none;\n transition: opacity var(--transition-duration, 300ms) var(--transition-easing, ease-in-out);\n}\n\n.progress-overlay {\n position: absolute;\n left: 0;\n top: 0;\n height: 100%;\n background: var(--ty-color-success);\n transition: width var(--transition-duration, 500ms) var(--transition-easing, ease-in-out);\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 /* No padding - let equal-width indicators fill the space */\n}\n\n/* ===================================== */\n/* Individual Step Indicator */\n/* Expose as CSS Part for step styling */\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 /* Equal width for all indicators - makes progress line alignment predictable */\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-color-primary);\n outline-offset: 4px;\n border-radius: 50%;\n}\n\n/* ===================================== */\n/* Step Circle - Smaller, cleaner */\n/* Expose as CSS Part for circle styling */\n/* ===================================== */\n\n.step-circle {\n /* Circle size - set --step-circle-size on ty-wizard element to customize */\n width: var(--step-circle-size, 32px);\n height: var(--step-circle-size, 32px);\n border-radius: 50%;\n border: 2px solid;\n display: flex;\n align-items: center;\n justify-content: center;\n position: relative;\n z-index: 10;\n transition: all var(--transition-duration, 300ms) var(--transition-easing, ease-in-out);\n box-sizing: border-box;\n flex-shrink: 0;\n}\n\n/* Completed state - green with success glow */\n.step-circle[data-state=\"completed\"] {\n background: var(--ty-color-success);\n border-color: var(--ty-color-success-600, var(--ty-color-success));\n color: white;\n box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.1);\n}\n\n/* Active state - primary with primary glow */\n.step-circle[data-state=\"active\"] {\n background: var(--ty-color-primary);\n border-color: var(--ty-color-primary-600, var(--ty-color-primary));\n color: white;\n box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1);\n}\n\n/* Pending state - neutral gray */\n.step-circle[data-state=\"pending\"] {\n background: var(--ty-surface-elevated, #f3f4f6);\n border-color: var(--ty-border, #d1d5db);\n color: var(--ty-text-soft, #6b7280);\n}\n\n/* Error state - red with danger glow */\n.step-circle[data-state=\"error\"] {\n background: var(--ty-color-danger, #ef4444);\n border-color: var(--ty-color-danger-600, #dc2626);\n color: white;\n box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.1);\n}\n\n/* ===================================== */\n/* Step Text Container */\n/* Wraps label and description */\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 - Main title */\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-text, inherit);\n transition: color 200ms;\n}\n\n.step-indicator[aria-selected=\"true\"] .step-label {\n color: var(--ty-text-strong, inherit);\n}\n\n.step-indicator[aria-selected=\"false\"] .step-label {\n color: var(--ty-text-soft, inherit);\n}\n\n/* ===================================== */\n/* Step Description - Subtitle */\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-text-soft, #9ca3af);\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-text, inherit);\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/* Expose as CSS Part for panels container styling */\n/* ===================================== */\n\n.panels-viewport {\n position: relative;\n flex: 1;\n overflow: hidden;\n /* Critical: hides off-screen panels */\n min-height: 0;\n /* Allows flex child to shrink */\n background: var(--ty-surface-elevated);\n}\n\n/* ===================================== */\n/* Panels Wrapper (slides horizontally) */\n/* ===================================== */\n\n.panels-wrapper {\n display: flex;\n height: 100%;\n transition: transform var(--transition-duration, 300ms) var(--transition-easing, ease-in-out);\n will-change: transform;\n}\n\n/* ===================================== */\n/* Slotted Step Panels */\n/* ===================================== */\n\n::slotted(ty-step) {\n width: var(--wizard-width, 100%);\n height: 100%;\n flex-shrink: 0;\n}\n\n/* ===================================== */\n/* Accessibility & Motion Preferences */\n/* ===================================== */\n\n/* Respect user's motion preferences */\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/* Screen reader only content */\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";
|
|
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";
|
|
25
20
|
//# 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;;;;;;;;;;;;;;;;;GAiBG;AAEH,eAAO,MAAM,YAAY,k/UAoWxB,CAAC"}
|