/** * Tag Component Styles * PORTED FROM: clj/ty/components/tag.css */ 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"; //# sourceMappingURL=tag.d.ts.map