tyrell-components 1.0.0-TC19 → 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/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
|
@@ -95,8 +95,8 @@ export const scrollContainerStyles = `
|
|
|
95
95
|
height: 80px;
|
|
96
96
|
background: var(--ty-scroll-shadow-top, radial-gradient(
|
|
97
97
|
ellipse 100% 30% at center,
|
|
98
|
-
|
|
99
|
-
|
|
98
|
+
color-mix(in oklab, var(--ty-color-neutral-bold) 12%, transparent),
|
|
99
|
+
transparent,
|
|
100
100
|
transparent
|
|
101
101
|
));
|
|
102
102
|
clip-path: inset(50% 0 0 0);
|
|
@@ -109,8 +109,8 @@ export const scrollContainerStyles = `
|
|
|
109
109
|
height: 60px;
|
|
110
110
|
background: var(--ty-scroll-shadow-bottom, radial-gradient(
|
|
111
111
|
ellipse 100% 20% at center,
|
|
112
|
-
|
|
113
|
-
|
|
112
|
+
color-mix(in oklab, var(--ty-color-neutral-bold) 18%, transparent),
|
|
113
|
+
transparent,
|
|
114
114
|
transparent
|
|
115
115
|
));
|
|
116
116
|
clip-path: inset(0 0 50% 0);
|
|
@@ -123,8 +123,8 @@ export const scrollContainerStyles = `
|
|
|
123
123
|
width: 60px;
|
|
124
124
|
background: var(--ty-scroll-shadow-left, radial-gradient(
|
|
125
125
|
ellipse 30% 100% at center,
|
|
126
|
-
|
|
127
|
-
|
|
126
|
+
color-mix(in oklab, var(--ty-color-neutral-bold) 12%, transparent),
|
|
127
|
+
transparent,
|
|
128
128
|
transparent
|
|
129
129
|
));
|
|
130
130
|
clip-path: inset(0 0 0 50%);
|
|
@@ -137,8 +137,8 @@ export const scrollContainerStyles = `
|
|
|
137
137
|
width: 60px;
|
|
138
138
|
background: var(--ty-scroll-shadow-right, radial-gradient(
|
|
139
139
|
ellipse 30% 100% at center,
|
|
140
|
-
|
|
141
|
-
|
|
140
|
+
color-mix(in oklab, var(--ty-color-neutral-bold) 12%, transparent),
|
|
141
|
+
transparent,
|
|
142
142
|
transparent
|
|
143
143
|
));
|
|
144
144
|
clip-path: inset(0 50% 0 0);
|
|
@@ -169,7 +169,7 @@ export const scrollContainerStyles = `
|
|
|
169
169
|
@media (pointer: coarse) and (hover: none) {
|
|
170
170
|
:host([custom-scrollbar]) .scroll-wrapper {
|
|
171
171
|
scrollbar-width: thin;
|
|
172
|
-
scrollbar-color: var(--ty-border,
|
|
172
|
+
scrollbar-color: var(--ty-border, color-mix(in oklab, var(--ty-color-neutral-bold) 25%, transparent)) transparent;
|
|
173
173
|
}
|
|
174
174
|
:host([custom-scrollbar]) .scroll-wrapper::-webkit-scrollbar {
|
|
175
175
|
display: block;
|
|
@@ -177,7 +177,7 @@ export const scrollContainerStyles = `
|
|
|
177
177
|
height: 4px;
|
|
178
178
|
}
|
|
179
179
|
:host([custom-scrollbar]) .scroll-wrapper::-webkit-scrollbar-thumb {
|
|
180
|
-
background: var(--ty-border,
|
|
180
|
+
background: var(--ty-border, color-mix(in oklab, var(--ty-color-neutral-bold) 25%, transparent));
|
|
181
181
|
border-radius: 2px;
|
|
182
182
|
}
|
|
183
183
|
}
|
package/lib/styles/step.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Step Component Styles
|
|
3
3
|
*/
|
|
4
|
-
export declare const stepStyles = "\n:host {\n width: var(--ty-wizard-width, 100%);\n height: calc(var(--ty-wizard-height, 700px) - var(--ty-wizard-indicators-height, 120px));\n display: block;\n box-sizing: border-box;\n flex-shrink: 0;\n transition: opacity var(--ty-wizard-transition-duration, 400ms) var(--ty-wizard-transition-easing, ease-in-out);\n}\n\n@media (prefers-reduced-motion: reduce) {\n :host {\n transition-duration: 0ms !important;\n }\n}\n\n.step-wrapper {\n width: 100%;\n height: 100%;\n position: relative;\n overflow: hidden;\n}\n\n.step-panel {\n width: 100%;\n height: 100%;\n overflow: auto;\n box-sizing: border-box;\n}\n\n.step-panel.ty-custom-scroll {\n scrollbar-width: none;\n -ms-overflow-style: none;\n}\n\n.step-panel.ty-custom-scroll::-webkit-scrollbar {\n display: none;\n}\n\n.step-wrapper:hover .ty-scrollbar-track-y.has-overflow {\n opacity: 1;\n}\n\n\n/* ===================================== */\n/* Custom Scrollbar - Vertical Track */\n/* ===================================== */\n\n.ty-scrollbar-track-y {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n width: var(--ty-scrollbar-width, 8px);\n z-index: 3;\n opacity: 0;\n pointer-events: none;\n transition: opacity 0.25s ease-out;\n cursor: pointer;\n}\n\n.ty-scrollbar-track-y.has-overflow {\n pointer-events: auto;\n}\n\n.ty-scrollbar-track-y.has-overflow:hover,\n.ty-scrollbar-track-y.has-overflow.scrolling,\n.ty-scrollbar-track-y.dragging {\n opacity: 1;\n}\n\n.ty-scrollbar-track-y::before {\n content: '';\n position: absolute;\n inset: 0;\n background: var(--ty-scrollbar-track, transparent);\n border-radius: var(--ty-scrollbar-radius, 4px);\n opacity: 0;\n transition: opacity 0.15s ease-out;\n}\n\n.ty-scrollbar-track-y:hover::before,\n.ty-scrollbar-track-y.dragging::before {\n opacity: 1;\n background: var(--ty-scrollbar-track-hover,
|
|
4
|
+
export declare const stepStyles = "\n:host {\n width: var(--ty-wizard-width, 100%);\n height: calc(var(--ty-wizard-height, 700px) - var(--ty-wizard-indicators-height, 120px));\n display: block;\n box-sizing: border-box;\n flex-shrink: 0;\n transition: opacity var(--ty-wizard-transition-duration, 400ms) var(--ty-wizard-transition-easing, ease-in-out);\n}\n\n@media (prefers-reduced-motion: reduce) {\n :host {\n transition-duration: 0ms !important;\n }\n}\n\n.step-wrapper {\n width: 100%;\n height: 100%;\n position: relative;\n overflow: hidden;\n}\n\n.step-panel {\n width: 100%;\n height: 100%;\n overflow: auto;\n box-sizing: border-box;\n}\n\n.step-panel.ty-custom-scroll {\n scrollbar-width: none;\n -ms-overflow-style: none;\n}\n\n.step-panel.ty-custom-scroll::-webkit-scrollbar {\n display: none;\n}\n\n.step-wrapper:hover .ty-scrollbar-track-y.has-overflow {\n opacity: 1;\n}\n\n\n/* ===================================== */\n/* Custom Scrollbar - Vertical Track */\n/* ===================================== */\n\n.ty-scrollbar-track-y {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n width: var(--ty-scrollbar-width, 8px);\n z-index: 3;\n opacity: 0;\n pointer-events: none;\n transition: opacity 0.25s ease-out;\n cursor: pointer;\n}\n\n.ty-scrollbar-track-y.has-overflow {\n pointer-events: auto;\n}\n\n.ty-scrollbar-track-y.has-overflow:hover,\n.ty-scrollbar-track-y.has-overflow.scrolling,\n.ty-scrollbar-track-y.dragging {\n opacity: 1;\n}\n\n.ty-scrollbar-track-y::before {\n content: '';\n position: absolute;\n inset: 0;\n background: var(--ty-scrollbar-track, transparent);\n border-radius: var(--ty-scrollbar-radius, 4px);\n opacity: 0;\n transition: opacity 0.15s ease-out;\n}\n\n.ty-scrollbar-track-y:hover::before,\n.ty-scrollbar-track-y.dragging::before {\n opacity: 1;\n background: var(--ty-scrollbar-track-hover, color-mix(in oklab, var(--ty-color-neutral-bold) 8%, transparent));\n}\n\n.ty-scrollbar-thumb-y {\n position: absolute;\n right: 0;\n width: 100%;\n min-height: var(--ty-scrollbar-thumb-min-height, 30px);\n background: var(--ty-scrollbar-thumb, color-mix(in oklab, var(--ty-color-neutral-bold) 40%, transparent));\n border-radius: var(--ty-scrollbar-radius, 4px);\n transition: background 0.15s ease-out;\n box-sizing: border-box;\n border: 1px solid transparent;\n}\n\n.ty-scrollbar-thumb-y:hover,\n.ty-scrollbar-track-y.dragging .ty-scrollbar-thumb-y {\n background: var(--ty-scrollbar-thumb-hover, color-mix(in oklab, var(--ty-color-neutral-bold) 55%, transparent));\n}\n\n.ty-scrollbar-thumb-y:active,\n.ty-scrollbar-track-y.dragging .ty-scrollbar-thumb-y {\n background: var(--ty-scrollbar-thumb-active, color-mix(in oklab, var(--ty-color-neutral-bold) 70%, transparent));\n}\n\n/* ===================================== */\n/* Custom Scrollbar - Horizontal Track */\n/* ===================================== */\n\n.ty-scrollbar-track-x {\n position: absolute;\n bottom: 0;\n left: 0;\n right: 0;\n height: var(--ty-scrollbar-width, 8px);\n z-index: 3;\n opacity: 0;\n pointer-events: none;\n transition: opacity 0.25s ease-out;\n cursor: pointer;\n}\n\n.ty-scrollbar-track-x.has-overflow {\n pointer-events: auto;\n}\n\n.ty-scrollbar-track-x.has-overflow:hover,\n.ty-scrollbar-track-x.has-overflow.scrolling,\n.ty-scrollbar-track-x.dragging {\n opacity: 1;\n}\n\n.ty-scrollbar-track-x::before {\n content: '';\n position: absolute;\n inset: 0;\n background: var(--ty-scrollbar-track, transparent);\n border-radius: var(--ty-scrollbar-radius, 4px);\n opacity: 0;\n transition: opacity 0.15s ease-out;\n}\n\n.ty-scrollbar-track-x:hover::before,\n.ty-scrollbar-track-x.dragging::before {\n opacity: 1;\n background: var(--ty-scrollbar-track-hover, color-mix(in oklab, var(--ty-color-neutral-bold) 8%, transparent));\n}\n\n.ty-scrollbar-thumb-x {\n position: absolute;\n bottom: 0;\n height: 100%;\n min-width: var(--ty-scrollbar-thumb-min-height, 30px);\n background: var(--ty-scrollbar-thumb, color-mix(in oklab, var(--ty-color-neutral-bold) 40%, transparent));\n border-radius: var(--ty-scrollbar-radius, 4px);\n transition: background 0.15s ease-out;\n box-sizing: border-box;\n border: 1px solid transparent;\n}\n\n.ty-scrollbar-thumb-x:hover,\n.ty-scrollbar-track-x.dragging .ty-scrollbar-thumb-x {\n background: var(--ty-scrollbar-thumb-hover, color-mix(in oklab, var(--ty-color-neutral-bold) 55%, transparent));\n}\n\n.ty-scrollbar-thumb-x:active,\n.ty-scrollbar-track-x.dragging .ty-scrollbar-thumb-x {\n background: var(--ty-scrollbar-thumb-active, color-mix(in oklab, var(--ty-color-neutral-bold) 70%, transparent));\n}\n\n/* ===================================== */\n/* Touch devices - hide custom scrollbar */\n/* ===================================== */\n\n@media (pointer: coarse) and (hover: none) {\n .ty-scrollbar-track-y,\n .ty-scrollbar-track-x {\n display: none !important;\n }\n}\n\n/* Respect reduced motion */\n@media (prefers-reduced-motion: reduce) {\n .ty-scrollbar-track-y,\n .ty-scrollbar-track-x,\n .ty-scrollbar-thumb-y,\n .ty-scrollbar-thumb-x {\n transition-duration: 0ms !important;\n }\n}\n\n";
|
|
5
5
|
//# sourceMappingURL=step.d.ts.map
|
package/lib/styles/step.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"step.d.ts","sourceRoot":"","sources":["../../src/styles/step.ts"],"names":[],"mappings":"AAAA;;GAEG;AAIH,eAAO,MAAM,UAAU,
|
|
1
|
+
{"version":3,"file":"step.d.ts","sourceRoot":"","sources":["../../src/styles/step.ts"],"names":[],"mappings":"AAAA;;GAEG;AAIH,eAAO,MAAM,UAAU,uiKA4CtB,CAAC"}
|
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.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";
|
|
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-bold);\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-bold);\n}\n\n.input-wrapper.primary.focused {\n border-color: var(--ty-color-primary-bold);\n box-shadow: 0 0 0 3px color-mix(in oklab, var(--ty-color-primary) 15%, transparent);\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-bold);\n box-shadow: 0 0 0 3px color-mix(in oklab, var(--ty-color-secondary) 15%, transparent);\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-bold);\n}\n\n.input-wrapper.success.focused {\n border-color: var(--ty-color-success-bold);\n box-shadow: 0 0 0 3px color-mix(in oklab, var(--ty-color-success) 15%, transparent);\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-bold);\n}\n\n.input-wrapper.danger.focused {\n border-color: var(--ty-color-danger-bold);\n box-shadow: 0 0 0 3px color-mix(in oklab, var(--ty-color-danger) 15%, transparent);\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-bold);\n}\n\n.input-wrapper.warning.focused {\n border-color: var(--ty-color-warning-bold);\n box-shadow: 0 0 0 3px color-mix(in oklab, var(--ty-color-warning) 15%, transparent);\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 color-mix(in oklab, var(--ty-color-danger) 15%, transparent);\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,iriBA0FxB,CAAC"}
|
package/lib/styles/tab.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Tab Component Styles
|
|
3
3
|
*/
|
|
4
|
-
export declare const tabStyles = "\n:host {\n width: var(--tabs-width, 100%);\n height: calc(var(--tabs-height, 400px) - var(--buttons-height, 48px));\n display: block;\n box-sizing: border-box;\n flex-shrink: 0;\n transition: opacity var(--transition-duration, 400ms) var(--transition-easing, ease-in-out);\n}\n\n@media (prefers-reduced-motion: reduce) {\n :host {\n transition-duration: 0ms !important;\n }\n}\n\n.tab-wrapper {\n width: 100%;\n height: 100%;\n position: relative;\n overflow: hidden;\n}\n\n.tab-panel {\n width: 100%;\n height: 100%;\n overflow: auto;\n box-sizing: border-box;\n}\n\n.tab-panel.ty-custom-scroll {\n scrollbar-width: none;\n -ms-overflow-style: none;\n}\n\n.tab-panel.ty-custom-scroll::-webkit-scrollbar {\n display: none;\n}\n\n/* Show scrollbar on hover */\n.tab-wrapper:hover .ty-scrollbar-track-y.has-overflow {\n opacity: 1;\n}\n\n\n/* ===================================== */\n/* Custom Scrollbar - Vertical Track */\n/* ===================================== */\n\n.ty-scrollbar-track-y {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n width: var(--ty-scrollbar-width, 8px);\n z-index: 3;\n opacity: 0;\n pointer-events: none;\n transition: opacity 0.25s ease-out;\n cursor: pointer;\n}\n\n.ty-scrollbar-track-y.has-overflow {\n pointer-events: auto;\n}\n\n.ty-scrollbar-track-y.has-overflow:hover,\n.ty-scrollbar-track-y.has-overflow.scrolling,\n.ty-scrollbar-track-y.dragging {\n opacity: 1;\n}\n\n.ty-scrollbar-track-y::before {\n content: '';\n position: absolute;\n inset: 0;\n background: var(--ty-scrollbar-track, transparent);\n border-radius: var(--ty-scrollbar-radius, 4px);\n opacity: 0;\n transition: opacity 0.15s ease-out;\n}\n\n.ty-scrollbar-track-y:hover::before,\n.ty-scrollbar-track-y.dragging::before {\n opacity: 1;\n background: var(--ty-scrollbar-track-hover,
|
|
4
|
+
export declare const tabStyles = "\n:host {\n width: var(--tabs-width, 100%);\n height: calc(var(--tabs-height, 400px) - var(--buttons-height, 48px));\n display: block;\n box-sizing: border-box;\n flex-shrink: 0;\n transition: opacity var(--transition-duration, 400ms) var(--transition-easing, ease-in-out);\n}\n\n@media (prefers-reduced-motion: reduce) {\n :host {\n transition-duration: 0ms !important;\n }\n}\n\n.tab-wrapper {\n width: 100%;\n height: 100%;\n position: relative;\n overflow: hidden;\n}\n\n.tab-panel {\n width: 100%;\n height: 100%;\n overflow: auto;\n box-sizing: border-box;\n}\n\n.tab-panel.ty-custom-scroll {\n scrollbar-width: none;\n -ms-overflow-style: none;\n}\n\n.tab-panel.ty-custom-scroll::-webkit-scrollbar {\n display: none;\n}\n\n/* Show scrollbar on hover */\n.tab-wrapper:hover .ty-scrollbar-track-y.has-overflow {\n opacity: 1;\n}\n\n\n/* ===================================== */\n/* Custom Scrollbar - Vertical Track */\n/* ===================================== */\n\n.ty-scrollbar-track-y {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n width: var(--ty-scrollbar-width, 8px);\n z-index: 3;\n opacity: 0;\n pointer-events: none;\n transition: opacity 0.25s ease-out;\n cursor: pointer;\n}\n\n.ty-scrollbar-track-y.has-overflow {\n pointer-events: auto;\n}\n\n.ty-scrollbar-track-y.has-overflow:hover,\n.ty-scrollbar-track-y.has-overflow.scrolling,\n.ty-scrollbar-track-y.dragging {\n opacity: 1;\n}\n\n.ty-scrollbar-track-y::before {\n content: '';\n position: absolute;\n inset: 0;\n background: var(--ty-scrollbar-track, transparent);\n border-radius: var(--ty-scrollbar-radius, 4px);\n opacity: 0;\n transition: opacity 0.15s ease-out;\n}\n\n.ty-scrollbar-track-y:hover::before,\n.ty-scrollbar-track-y.dragging::before {\n opacity: 1;\n background: var(--ty-scrollbar-track-hover, color-mix(in oklab, var(--ty-color-neutral-bold) 8%, transparent));\n}\n\n.ty-scrollbar-thumb-y {\n position: absolute;\n right: 0;\n width: 100%;\n min-height: var(--ty-scrollbar-thumb-min-height, 30px);\n background: var(--ty-scrollbar-thumb, color-mix(in oklab, var(--ty-color-neutral-bold) 40%, transparent));\n border-radius: var(--ty-scrollbar-radius, 4px);\n transition: background 0.15s ease-out;\n box-sizing: border-box;\n border: 1px solid transparent;\n}\n\n.ty-scrollbar-thumb-y:hover,\n.ty-scrollbar-track-y.dragging .ty-scrollbar-thumb-y {\n background: var(--ty-scrollbar-thumb-hover, color-mix(in oklab, var(--ty-color-neutral-bold) 55%, transparent));\n}\n\n.ty-scrollbar-thumb-y:active,\n.ty-scrollbar-track-y.dragging .ty-scrollbar-thumb-y {\n background: var(--ty-scrollbar-thumb-active, color-mix(in oklab, var(--ty-color-neutral-bold) 70%, transparent));\n}\n\n/* ===================================== */\n/* Custom Scrollbar - Horizontal Track */\n/* ===================================== */\n\n.ty-scrollbar-track-x {\n position: absolute;\n bottom: 0;\n left: 0;\n right: 0;\n height: var(--ty-scrollbar-width, 8px);\n z-index: 3;\n opacity: 0;\n pointer-events: none;\n transition: opacity 0.25s ease-out;\n cursor: pointer;\n}\n\n.ty-scrollbar-track-x.has-overflow {\n pointer-events: auto;\n}\n\n.ty-scrollbar-track-x.has-overflow:hover,\n.ty-scrollbar-track-x.has-overflow.scrolling,\n.ty-scrollbar-track-x.dragging {\n opacity: 1;\n}\n\n.ty-scrollbar-track-x::before {\n content: '';\n position: absolute;\n inset: 0;\n background: var(--ty-scrollbar-track, transparent);\n border-radius: var(--ty-scrollbar-radius, 4px);\n opacity: 0;\n transition: opacity 0.15s ease-out;\n}\n\n.ty-scrollbar-track-x:hover::before,\n.ty-scrollbar-track-x.dragging::before {\n opacity: 1;\n background: var(--ty-scrollbar-track-hover, color-mix(in oklab, var(--ty-color-neutral-bold) 8%, transparent));\n}\n\n.ty-scrollbar-thumb-x {\n position: absolute;\n bottom: 0;\n height: 100%;\n min-width: var(--ty-scrollbar-thumb-min-height, 30px);\n background: var(--ty-scrollbar-thumb, color-mix(in oklab, var(--ty-color-neutral-bold) 40%, transparent));\n border-radius: var(--ty-scrollbar-radius, 4px);\n transition: background 0.15s ease-out;\n box-sizing: border-box;\n border: 1px solid transparent;\n}\n\n.ty-scrollbar-thumb-x:hover,\n.ty-scrollbar-track-x.dragging .ty-scrollbar-thumb-x {\n background: var(--ty-scrollbar-thumb-hover, color-mix(in oklab, var(--ty-color-neutral-bold) 55%, transparent));\n}\n\n.ty-scrollbar-thumb-x:active,\n.ty-scrollbar-track-x.dragging .ty-scrollbar-thumb-x {\n background: var(--ty-scrollbar-thumb-active, color-mix(in oklab, var(--ty-color-neutral-bold) 70%, transparent));\n}\n\n/* ===================================== */\n/* Touch devices - hide custom scrollbar */\n/* ===================================== */\n\n@media (pointer: coarse) and (hover: none) {\n .ty-scrollbar-track-y,\n .ty-scrollbar-track-x {\n display: none !important;\n }\n}\n\n/* Respect reduced motion */\n@media (prefers-reduced-motion: reduce) {\n .ty-scrollbar-track-y,\n .ty-scrollbar-track-x,\n .ty-scrollbar-thumb-y,\n .ty-scrollbar-thumb-x {\n transition-duration: 0ms !important;\n }\n}\n\n";
|
|
5
5
|
//# sourceMappingURL=tab.d.ts.map
|
package/lib/styles/tab.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tab.d.ts","sourceRoot":"","sources":["../../src/styles/tab.ts"],"names":[],"mappings":"AAAA;;GAEG;AAIH,eAAO,MAAM,SAAS
|
|
1
|
+
{"version":3,"file":"tab.d.ts","sourceRoot":"","sources":["../../src/styles/tab.ts"],"names":[],"mappings":"AAAA;;GAEG;AAIH,eAAO,MAAM,SAAS,qhKA6CrB,CAAC"}
|
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"}
|