tyrell-components 1.0.0-RC13 → 1.0.0-RC15

package/lib/styles/field-size.js

@@ -0,0 +1,91 @@
+export const fieldSizeVars = `
+:host {
+--ty-field-height: var(--ty-size-sm, 2rem);
+--ty-field-pad-x: 10px;
+--ty-field-font: var(--ty-font-sm);
+--ty-field-leading: 20px;
+--ty-field-tracking: var(--ty-tracking-sm);
+--ty-field-label-font: var(--ty-font-xs);
+--ty-field-label-leading: var(--ty-leading-xs);
+--ty-field-label-gap: 5px;
+--ty-field-outer-pad-x: calc(var(--ty-field-pad-x) + 1px);
+--ty-field-control: 24px;
+--ty-field-icon: 16px;
+}
+:host([size="xs"]) {
+--ty-field-height: var(--ty-size-xs, 1.75rem);
+--ty-field-pad-x: 8px;
+--ty-field-font: var(--ty-font-xs);
+--ty-field-leading: 16px;
+--ty-field-tracking: var(--ty-tracking-xs);
+--ty-field-label-font: var(--ty-font-xs);
+--ty-field-label-leading: var(--ty-leading-xs);
+--ty-field-label-gap: 4px;
+--ty-field-control: 20px;
+--ty-field-icon: 14px;
+}
+:host([size="md"]) {
+--ty-field-height: var(--ty-size-md, 2.25rem);
+--ty-field-pad-x: 12px;
+--ty-field-font: var(--ty-font-sm);
+--ty-field-leading: 20px;
+--ty-field-tracking: var(--ty-tracking-sm);
+--ty-field-label-font: var(--ty-font-sm);
+--ty-field-label-leading: var(--ty-leading-sm);
+--ty-field-label-gap: 6px;
+--ty-field-control: 28px;
+--ty-field-icon: 18px;
+}
+:host([size="lg"]) {
+--ty-field-height: var(--ty-size-lg, 2.5rem);
+--ty-field-pad-x: 14px;
+--ty-field-font: var(--ty-font-base);
+--ty-field-leading: 24px;
+--ty-field-tracking: var(--ty-tracking-base);
+--ty-field-label-font: var(--ty-font-sm);
+--ty-field-label-leading: var(--ty-leading-sm);
+--ty-field-label-gap: 6px;
+--ty-field-control: 32px;
+--ty-field-icon: 20px;
+}
+:host([size="xl"]) {
+--ty-field-height: var(--ty-size-xl, 2.75rem);
+--ty-field-pad-x: 16px;
+--ty-field-font: var(--ty-font-lg);
+--ty-field-leading: 28px;
+--ty-field-tracking: var(--ty-tracking-base);
+--ty-field-label-font: var(--ty-font-base);
+--ty-field-label-leading: var(--ty-leading-base);
+--ty-field-label-gap: 8px;
+--ty-field-control: 36px;
+--ty-field-icon: 22px;
+}
+@media (max-width: 640px) {
+:host([size="lg"]) {
+--ty-field-height: var(--ty-size-md, 2.25rem);
+--ty-field-pad-x: 12px;
+--ty-field-font: var(--ty-font-sm);
+--ty-field-leading: 20px;
+--ty-field-control: 28px;
+--ty-field-icon: 18px;
+}
+:host([size="xl"]) {
+--ty-field-height: var(--ty-size-lg, 2.5rem);
+--ty-field-pad-x: 14px;
+--ty-field-font: var(--ty-font-base);
+--ty-field-leading: 24px;
+--ty-field-control: 32px;
+--ty-field-icon: 20px;
+}
+}
+@media (max-width: 480px) {
+:host([size="xl"]) {
+--ty-field-height: var(--ty-size-md, 2.25rem);
+--ty-field-pad-x: 12px;
+--ty-field-font: var(--ty-font-sm);
+--ty-field-leading: 20px;
+--ty-field-control: 28px;
+--ty-field-icon: 18px;
+}
+}
+`;

package/lib/styles/file-upload.d.ts

@@ -1,2 +1 @@
-export declare const fileUploadStyles = "\n:host {\n  display: block;\n  font-family: var(--ty-font-sans);\n  width: 100%;\n}\n\n.file-upload-container {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  box-sizing: border-box;\n}\n\n/* ===== LABEL ===== */\n\n.upload-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: 4px;\n  display: flex;\n  align-items: center;\n}\n\n.required-icon {\n  color: var(--ty-color-danger);\n  margin-left: 4px;\n  font-size: 0.75rem;\n  line-height: 1;\n}\n\n/* ===== DROP ZONE ===== */\n\n.drop-zone {\n  border: 2px dashed var(--ty-border);\n  border-radius: var(--ty-radius-base);\n  padding: 2rem 1.5rem;\n  text-align: center;\n  cursor: pointer;\n  transition: var(--ty-local-transition, border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease);\n  outline: none;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 0.5rem;\n  min-height: 140px;\n  user-select: none;\n}\n\n.drop-zone:hover:not(.disabled) {\n  border-color: var(--ty-input-border-hover);\n  background: var(--ty-surface-content);\n}\n\n.drop-zone.focused {\n  border-color: var(--ty-input-border-focus);\n  box-shadow: 0 0 0 3px var(--ty-input-shadow-focus);\n}\n\n.drop-zone.drag-active {\n  border-color: var(--ty-color-primary);\n  border-style: solid;\n  background: var(--ty-bg-primary-);\n}\n\n.drop-zone.drag-active .upload-icon {\n  color: var(--ty-color-primary);\n  transform: translateY(-2px);\n}\n\n.drop-zone.has-files {\n  min-height: 80px;\n  padding: 1.25rem 1.5rem;\n}\n\n.drop-zone.disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n  pointer-events: none;\n}\n\n.drop-zone.error {\n  border-color: var(--ty-color-danger);\n}\n\n.drop-zone.error:not(.disabled) {\n  background: var(--ty-bg-danger-);\n}\n\n/* ===== UPLOAD ICON ===== */\n\n.upload-icon {\n  color: var(--ty-text-faint);\n  width: 2.5rem;\n  height: 2.5rem;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: var(--ty-local-transition, color 0.15s ease, transform 0.15s ease);\n  pointer-events: none;\n}\n\n.upload-icon svg {\n  width: 100%;\n  height: 100%;\n}\n\n/* ===== HINT TEXT ===== */\n\n.upload-hint {\n  color: var(--ty-text-soft);\n  font-size: var(--ty-font-sm);\n  line-height: var(--ty-leading-sm);\n  pointer-events: none;\n}\n\n.browse-link {\n  color: var(--ty-color-primary);\n  font-weight: var(--ty-font-medium);\n}\n\n.upload-sub-hint {\n  color: var(--ty-text-faint);\n  font-size: var(--ty-font-xs);\n  line-height: var(--ty-leading-xs);\n  pointer-events: none;\n}\n\n/* ===== FILE LIST ===== */\n\n.file-list {\n  display: flex;\n  flex-direction: column;\n  gap: 0.375rem;\n  margin-top: 0.5rem;\n}\n\n.file-item {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  padding: 0.5rem 0.75rem;\n  border-radius: var(--ty-radius-base);\n  background: var(--ty-surface-content);\n  border: 1px solid var(--ty-border-soft);\n}\n\n.file-icon {\n  color: var(--ty-text-faint);\n  flex-shrink: 0;\n  width: 1rem;\n  height: 1rem;\n  display: flex;\n  align-items: center;\n}\n\n.file-icon svg {\n  width: 100%;\n  height: 100%;\n}\n\n.file-name {\n  flex: 1;\n  font-size: var(--ty-font-sm);\n  color: var(--ty-text);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  min-width: 0;\n}\n\n.file-size {\n  font-size: var(--ty-font-xs);\n  color: var(--ty-text-faint);\n  flex-shrink: 0;\n  font-variant-numeric: tabular-nums;\n}\n\n.file-remove {\n  flex-shrink: 0;\n  cursor: pointer;\n  color: var(--ty-text-faint);\n  width: 1.25rem;\n  height: 1.25rem;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 50%;\n  transition: var(--ty-local-transition, color 0.15s ease, background-color 0.15s ease);\n  border: none;\n  background: none;\n  padding: 0;\n  outline: none;\n}\n\n.file-remove:hover {\n  color: var(--ty-color-danger);\n  background: var(--ty-bg-danger-);\n}\n\n.file-remove:focus-visible {\n  box-shadow: 0 0 0 2px var(--ty-color-danger);\n}\n\n.file-remove svg {\n  width: 12px;\n  height: 12px;\n}\n\n/* ===== ERROR MESSAGE ===== */\n\n.error-message {\n  font-size: var(--ty-font-xs);\n  line-height: var(--ty-leading-xs);\n  color: var(--ty-color-danger);\n  margin-top: 4px;\n  padding-left: 4px;\n}\n\n/* ===== ACCESSIBILITY ===== */\n\n@media (prefers-reduced-motion: reduce) {\n  .drop-zone,\n  .upload-icon,\n  .file-remove {\n    transition: none;\n  }\n}\n\n@media (prefers-contrast: high) {\n  .drop-zone {\n    border-width: 3px;\n  }\n}\n";
-//# sourceMappingURL=file-upload.d.ts.map
+export declare const fileUploadStyles = "\n:host {\n  display: block;\n  font-family: inherit;\n  width: 100%;\n}\n\n.file-upload-container {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  box-sizing: border-box;\n}\n\n.upload-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: 4px;\n  display: flex;\n  align-items: center;\n}\n\n.required-icon {\n  color: var(--ty-color-danger);\n  margin-left: 4px;\n  font-size: 0.75rem;\n  line-height: 1;\n}\n\n.drop-zone {\n  border: 2px dashed var(--ty-border);\n  border-radius: var(--ty-radius-base);\n  padding: 2rem 1.5rem;\n  text-align: center;\n  cursor: pointer;\n  transition: var(--ty-local-transition, border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease);\n  outline: none;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 0.5rem;\n  min-height: 140px;\n  user-select: none;\n}\n\n.drop-zone:hover:not(.disabled) {\n  border-color: var(--ty-input-border-hover);\n  background: var(--ty-surface-content);\n}\n\n.drop-zone.focused {\n  border-color: var(--ty-input-border-focus);\n  box-shadow: 0 0 0 3px var(--ty-input-shadow-focus);\n}\n\n.drop-zone.drag-active {\n  border-color: var(--ty-color-primary);\n  border-style: solid;\n  background: var(--ty-bg-primary-);\n}\n\n.drop-zone.drag-active .upload-icon {\n  color: var(--ty-color-primary);\n  transform: translateY(-2px);\n}\n\n.drop-zone.has-files {\n  min-height: 80px;\n  padding: 1.25rem 1.5rem;\n}\n\n.drop-zone.disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n  pointer-events: none;\n}\n\n.drop-zone.error {\n  border-color: var(--ty-color-danger);\n}\n\n.drop-zone.error:not(.disabled) {\n  background: var(--ty-bg-danger-);\n}\n\n.upload-icon {\n  color: var(--ty-text-faint);\n  width: 2.5rem;\n  height: 2.5rem;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: var(--ty-local-transition, color 0.15s ease, transform 0.15s ease);\n  pointer-events: none;\n}\n\n.upload-icon svg {\n  width: 100%;\n  height: 100%;\n}\n\n.upload-hint {\n  color: var(--ty-text-soft);\n  font-size: var(--ty-font-sm);\n  line-height: var(--ty-leading-sm);\n  pointer-events: none;\n}\n\n.browse-link {\n  color: var(--ty-color-primary);\n  font-weight: var(--ty-font-medium);\n}\n\n.upload-sub-hint {\n  color: var(--ty-text-faint);\n  font-size: var(--ty-font-xs);\n  line-height: var(--ty-leading-xs);\n  pointer-events: none;\n}\n\n.file-list {\n  display: flex;\n  flex-direction: column;\n  gap: 0.375rem;\n  margin-top: 0.5rem;\n}\n\n.file-item {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  padding: 0.5rem 0.75rem;\n  border-radius: var(--ty-radius-base);\n  background: var(--ty-surface-content);\n  border: 1px solid var(--ty-border-soft);\n}\n\n.file-icon {\n  color: var(--ty-text-faint);\n  flex-shrink: 0;\n  width: 1rem;\n  height: 1rem;\n  display: flex;\n  align-items: center;\n}\n\n.file-icon svg {\n  width: 100%;\n  height: 100%;\n}\n\n.file-name {\n  flex: 1;\n  font-size: var(--ty-font-sm);\n  color: var(--ty-text);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  min-width: 0;\n}\n\n.file-size {\n  font-size: var(--ty-font-xs);\n  color: var(--ty-text-faint);\n  flex-shrink: 0;\n  font-variant-numeric: tabular-nums;\n}\n\n.file-remove {\n  flex-shrink: 0;\n  cursor: pointer;\n  color: var(--ty-text-faint);\n  width: 1.25rem;\n  height: 1.25rem;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 50%;\n  transition: var(--ty-local-transition, color 0.15s ease, background-color 0.15s ease);\n  border: none;\n  background: none;\n  padding: 0;\n  outline: none;\n}\n\n.file-remove:hover {\n  color: var(--ty-color-danger);\n  background: var(--ty-bg-danger-);\n}\n\n.file-remove:focus-visible {\n  box-shadow: 0 0 0 2px var(--ty-color-danger);\n}\n\n.file-remove svg {\n  width: 12px;\n  height: 12px;\n}\n\n.error-message {\n  font-size: var(--ty-font-xs);\n  line-height: var(--ty-leading-xs);\n  color: var(--ty-color-danger);\n  margin-top: 4px;\n  padding-left: 4px;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .drop-zone,\n  .upload-icon,\n  .file-remove {\n    transition: none;\n  }\n}\n\n@media (prefers-contrast: high) {\n  .drop-zone {\n    border-width: 3px;\n  }\n}\n";

package/lib/styles/file-upload.js

@@ -1,241 +1,196 @@
 export const fileUploadStyles = `
 :host {
-  display: block;
-  font-family: var(--ty-font-sans);
-  width: 100%;
+display: block;
+font-family: inherit;
+width: 100%;
 }
-
 .file-upload-container {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  box-sizing: border-box;
-}
-
-/* ===== LABEL ===== */
-
+display: flex;
+flex-direction: column;
+width: 100%;
+box-sizing: border-box;
+}
 .upload-label {
-  font-size: var(--ty-font-sm);
-  line-height: var(--ty-leading-sm);
-  letter-spacing: var(--ty-tracking-sm);
-  font-weight: var(--ty-font-medium);
-  color: var(--ty-label-color);
-  margin-bottom: 6px;
-  padding-left: 4px;
-  display: flex;
-  align-items: center;
-}
-
+font-size: var(--ty-font-sm);
+line-height: var(--ty-leading-sm);
+letter-spacing: var(--ty-tracking-sm);
+font-weight: var(--ty-font-medium);
+color: var(--ty-label-color);
+margin-bottom: 6px;
+padding-left: 4px;
+display: flex;
+align-items: center;
+}
 .required-icon {
-  color: var(--ty-color-danger);
-  margin-left: 4px;
-  font-size: 0.75rem;
-  line-height: 1;
-}
-
-/* ===== DROP ZONE ===== */
-
+color: var(--ty-color-danger);
+margin-left: 4px;
+font-size: 0.75rem;
+line-height: 1;
+}
 .drop-zone {
-  border: 2px dashed var(--ty-border);
-  border-radius: var(--ty-radius-base);
-  padding: 2rem 1.5rem;
-  text-align: center;
-  cursor: pointer;
-  transition: var(--ty-local-transition, border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease);
-  outline: none;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: 0.5rem;
-  min-height: 140px;
-  user-select: none;
-}
-
+border: 2px dashed var(--ty-border);
+border-radius: var(--ty-radius-base);
+padding: 2rem 1.5rem;
+text-align: center;
+cursor: pointer;
+transition: var(--ty-local-transition, border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease);
+outline: none;
+display: flex;
+flex-direction: column;
+align-items: center;
+justify-content: center;
+gap: 0.5rem;
+min-height: 140px;
+user-select: none;
+}
 .drop-zone:hover:not(.disabled) {
-  border-color: var(--ty-input-border-hover);
-  background: var(--ty-surface-content);
+border-color: var(--ty-input-border-hover);
+background: var(--ty-surface-content);
 }
-
 .drop-zone.focused {
-  border-color: var(--ty-input-border-focus);
-  box-shadow: 0 0 0 3px var(--ty-input-shadow-focus);
+border-color: var(--ty-input-border-focus);
+box-shadow: 0 0 0 3px var(--ty-input-shadow-focus);
 }
-
 .drop-zone.drag-active {
-  border-color: var(--ty-color-primary);
-  border-style: solid;
-  background: var(--ty-bg-primary-);
+border-color: var(--ty-color-primary);
+border-style: solid;
+background: var(--ty-bg-primary-);
 }
-
 .drop-zone.drag-active .upload-icon {
-  color: var(--ty-color-primary);
-  transform: translateY(-2px);
+color: var(--ty-color-primary);
+transform: translateY(-2px);
 }
-
 .drop-zone.has-files {
-  min-height: 80px;
-  padding: 1.25rem 1.5rem;
+min-height: 80px;
+padding: 1.25rem 1.5rem;
 }
-
 .drop-zone.disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-  pointer-events: none;
+opacity: 0.5;
+cursor: not-allowed;
+pointer-events: none;
 }
-
 .drop-zone.error {
-  border-color: var(--ty-color-danger);
+border-color: var(--ty-color-danger);
 }
-
 .drop-zone.error:not(.disabled) {
-  background: var(--ty-bg-danger-);
+background: var(--ty-bg-danger-);
 }
-
-/* ===== UPLOAD ICON ===== */
-
 .upload-icon {
-  color: var(--ty-text-faint);
-  width: 2.5rem;
-  height: 2.5rem;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  transition: var(--ty-local-transition, color 0.15s ease, transform 0.15s ease);
-  pointer-events: none;
-}
-
+color: var(--ty-text-faint);
+width: 2.5rem;
+height: 2.5rem;
+display: flex;
+align-items: center;
+justify-content: center;
+transition: var(--ty-local-transition, color 0.15s ease, transform 0.15s ease);
+pointer-events: none;
+}
 .upload-icon svg {
-  width: 100%;
-  height: 100%;
+width: 100%;
+height: 100%;
 }
-
-/* ===== HINT TEXT ===== */
-
 .upload-hint {
-  color: var(--ty-text-soft);
-  font-size: var(--ty-font-sm);
-  line-height: var(--ty-leading-sm);
-  pointer-events: none;
+color: var(--ty-text-soft);
+font-size: var(--ty-font-sm);
+line-height: var(--ty-leading-sm);
+pointer-events: none;
 }
-
 .browse-link {
-  color: var(--ty-color-primary);
-  font-weight: var(--ty-font-medium);
+color: var(--ty-color-primary);
+font-weight: var(--ty-font-medium);
 }
-
 .upload-sub-hint {
-  color: var(--ty-text-faint);
-  font-size: var(--ty-font-xs);
-  line-height: var(--ty-leading-xs);
-  pointer-events: none;
-}
-
-/* ===== FILE LIST ===== */
-
+color: var(--ty-text-faint);
+font-size: var(--ty-font-xs);
+line-height: var(--ty-leading-xs);
+pointer-events: none;
+}
 .file-list {
-  display: flex;
-  flex-direction: column;
-  gap: 0.375rem;
-  margin-top: 0.5rem;
+display: flex;
+flex-direction: column;
+gap: 0.375rem;
+margin-top: 0.5rem;
 }
-
 .file-item {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  padding: 0.5rem 0.75rem;
-  border-radius: var(--ty-radius-base);
-  background: var(--ty-surface-content);
-  border: 1px solid var(--ty-border-soft);
-}
-
+display: flex;
+align-items: center;
+gap: 0.5rem;
+padding: 0.5rem 0.75rem;
+border-radius: var(--ty-radius-base);
+background: var(--ty-surface-content);
+border: 1px solid var(--ty-border-soft);
+}
 .file-icon {
-  color: var(--ty-text-faint);
-  flex-shrink: 0;
-  width: 1rem;
-  height: 1rem;
-  display: flex;
-  align-items: center;
-}
-
+color: var(--ty-text-faint);
+flex-shrink: 0;
+width: 1rem;
+height: 1rem;
+display: flex;
+align-items: center;
+}
 .file-icon svg {
-  width: 100%;
-  height: 100%;
+width: 100%;
+height: 100%;
 }
-
 .file-name {
-  flex: 1;
-  font-size: var(--ty-font-sm);
-  color: var(--ty-text);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  min-width: 0;
-}
-
+flex: 1;
+font-size: var(--ty-font-sm);
+color: var(--ty-text);
+white-space: nowrap;
+overflow: hidden;
+text-overflow: ellipsis;
+min-width: 0;
+}
 .file-size {
-  font-size: var(--ty-font-xs);
-  color: var(--ty-text-faint);
-  flex-shrink: 0;
-  font-variant-numeric: tabular-nums;
+font-size: var(--ty-font-xs);
+color: var(--ty-text-faint);
+flex-shrink: 0;
+font-variant-numeric: tabular-nums;
 }
-
 .file-remove {
-  flex-shrink: 0;
-  cursor: pointer;
-  color: var(--ty-text-faint);
-  width: 1.25rem;
-  height: 1.25rem;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 50%;
-  transition: var(--ty-local-transition, color 0.15s ease, background-color 0.15s ease);
-  border: none;
-  background: none;
-  padding: 0;
-  outline: none;
-}
-
+flex-shrink: 0;
+cursor: pointer;
+color: var(--ty-text-faint);
+width: 1.25rem;
+height: 1.25rem;
+display: flex;
+align-items: center;
+justify-content: center;
+border-radius: 50%;
+transition: var(--ty-local-transition, color 0.15s ease, background-color 0.15s ease);
+border: none;
+background: none;
+padding: 0;
+outline: none;
+}
 .file-remove:hover {
-  color: var(--ty-color-danger);
-  background: var(--ty-bg-danger-);
+color: var(--ty-color-danger);
+background: var(--ty-bg-danger-);
 }
-
 .file-remove:focus-visible {
-  box-shadow: 0 0 0 2px var(--ty-color-danger);
+box-shadow: 0 0 0 2px var(--ty-color-danger);
 }
-
 .file-remove svg {
-  width: 12px;
-  height: 12px;
+width: 12px;
+height: 12px;
 }
-
-/* ===== ERROR MESSAGE ===== */
-
 .error-message {
-  font-size: var(--ty-font-xs);
-  line-height: var(--ty-leading-xs);
-  color: var(--ty-color-danger);
-  margin-top: 4px;
-  padding-left: 4px;
-}
-
-/* ===== ACCESSIBILITY ===== */
-
+font-size: var(--ty-font-xs);
+line-height: var(--ty-leading-xs);
+color: var(--ty-color-danger);
+margin-top: 4px;
+padding-left: 4px;
+}
 @media (prefers-reduced-motion: reduce) {
-  .drop-zone,
-  .upload-icon,
-  .file-remove {
-    transition: none;
-  }
+.drop-zone,
+.upload-icon,
+.file-remove {
+transition: none;
+}
 }
-
 @media (prefers-contrast: high) {
-  .drop-zone {
-    border-width: 3px;
-  }
+.drop-zone {
+border-width: 3px;
+}
 }
 `;
-//# sourceMappingURL=file-upload.js.map

package/lib/styles/icon.d.ts

@@ -1,6 +1,2 @@
-/**
- * Icon Component Styles
- * PORTED FROM: clj/ty/components/icon.css
- */
-export declare const iconStyles = "\n:host {\n  /* Display & Layout - CRITICAL: No containment to prevent paint deferral */\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  line-height: 0;\n  \n  /* Dimensions with CSS variable support for flexibility */\n  width: var(--ty-icon-size, 1em);\n  height: var(--ty-icon-size, 1em);\n  \n  /* Enforce square aspect ratio */\n  aspect-ratio: 1 / 1;\n  \n  \n  /* Color & Transitions */\n  color: inherit;\n  transition: color var(--ty-transition-fast);\n  \n  /* Flex Behavior */\n  flex-shrink: 0;\n  \n  /* Visibility - Force immediate rendering */\n  visibility: visible !important;\n  opacity: 1;\n  \n  /* ANTI-FLICKER: Force browser to paint immediately */\n  will-change: contents;\n  \n  /* Prevent any sub-pixel rendering issues */\n  transform: translateZ(0);\n  -webkit-font-smoothing: antialiased;\n}\n\n/* The SVG element inside shadow DOM (registry / fallback path) */\n:host svg {\n  width: 100%;\n  height: 100%;\n  display: block;\n\n  /* Force immediate SVG rendering */\n  will-change: auto;\n  transform: translateZ(0);\n}\n\n/* Slotted SVG (server-side path: <ty-icon><svg>...</svg></ty-icon>).\n   ::slotted() targets light-DOM children so they fill the host the same way\n   shadow-DOM SVG does. Color is inherited from :host via currentColor. */\n::slotted(svg),\n::slotted(img) {\n  width: 100%;\n  height: 100%;\n  display: block;\n}\n\n/* When used in slots, ensure proper display */\n:host([slot]) {\n  display: inline-flex;\n}\n\n/* Size variants via CSS classes on the host */\n:host(.icon-xs) {\n  width: 0.75em;\n  height: 0.75em;\n}\n\n:host(.icon-sm) {\n  width: 0.875em;\n  height: 0.875em;\n}\n\n:host(.icon-md) {\n  width: 1em;\n  height: 1em;\n}\n\n:host(.icon-lg) {\n  width: 1.25em;\n  height: 1.25em;\n}\n\n:host(.icon-xl) {\n  width: 1.5em;\n  height: 1.5em;\n}\n\n:host(.icon-2xl) {\n  width: 2em;\n  height: 2em;\n}\n\n/* Fixed pixel sizes */\n:host(.icon-12) {\n  width: 12px;\n  height: 12px;\n}\n\n:host(.icon-14) {\n  width: 14px;\n  height: 14px;\n}\n\n:host(.icon-16) {\n  width: 16px;\n  height: 16px;\n}\n\n:host(.icon-18) {\n  width: 18px;\n  height: 18px;\n}\n\n:host(.icon-20) {\n  width: 20px;\n  height: 20px;\n}\n\n:host(.icon-24) {\n  width: 24px;\n  height: 24px;\n}\n\n:host(.icon-32) {\n  width: 32px;\n  height: 32px;\n}\n\n:host(.icon-48) {\n  width: 48px;\n  height: 48px;\n}\n\n:host(.icon-64) {\n  width: 64px;\n  height: 64px;\n}\n\n:host(.icon-80) {\n  width: 80px;\n  height: 80px;\n}\n\n:host(.icon-96) {\n  width: 96px;\n  height: 96px;\n}\n\n/* Spinning animation - default tempo */\n:host(.icon-spin) {\n  animation: icon-spin 1s linear infinite;\n}\n\n/* Spinning animation - slow tempo */\n:host(.icon-spin.icon-tempo-slow) {\n  animation: icon-spin 2s linear infinite;\n}\n\n/* Spinning animation - fast tempo */\n:host(.icon-spin.icon-tempo-fast) {\n  animation: icon-spin 0.5s linear infinite;\n}\n\n@keyframes icon-spin {\n  from {\n    transform: rotate(0deg);\n  }\n\n  to {\n    transform: rotate(360deg);\n  }\n}\n\n/* Pulse animation - default tempo */\n:host(.icon-pulse) {\n  animation: icon-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n}\n\n/* Pulse animation - slow tempo */\n:host(.icon-pulse.icon-tempo-slow) {\n  animation: icon-pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n}\n\n/* Pulse animation - fast tempo */\n:host(.icon-pulse.icon-tempo-fast) {\n  animation: icon-pulse 1s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n}\n\n@keyframes icon-pulse {\n  0%,\n  100% {\n    opacity: 1;\n  }\n\n  50% {\n    opacity: 0.5;\n  }\n}\n\n/* Accessibility: ensure icons are not announced by screen readers by default */\n:host {\n  -webkit-user-select: none;\n  user-select: none;\n}\n\n/* Allow pointer events to pass through by default */\n:host(:not(.icon-clickable)) {\n  pointer-events: none;\n}\n\n/* Clickable icons */\n:host(.icon-clickable) {\n  cursor: pointer;\n  pointer-events: auto;\n  transition: color var(--ty-transition-fast), transform var(--ty-transition-fast);\n}\n\n:host(.icon-clickable:hover) {\n  transform: scale(1.1);\n}\n\n:host(.icon-clickable:active) {\n  transform: scale(0.95);\n}\n\n/* Disabled state */\n:host(.icon-disabled) {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n/* Block display variant */\n:host(.icon-block) {\n  display: block;\n}\n";
-//# sourceMappingURL=icon.d.ts.map
+/** Icon Component Styles */
+export declare const iconStyles = "\n:host {\n  /* Display & Layout - CRITICAL: No containment to prevent paint deferral */\n  /* Block-level flex, NOT inline-flex: as an inline box the icon generates a\n     line box in its parent, so a shrink-wrapping wrapper (badge, .rounded-full\n     chip) inherits the parent's line-height strut and renders taller than wide\n     \u2014 a 12px icon in a 24px-line-height badge becomes a 22x34 oval. To place an\n     icon inline with text, make the *text wrapper* inline-flex instead. */\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  line-height: 0;\n  \n  width: var(--ty-icon-size, 1em);\n  height: var(--ty-icon-size, 1em);\n  \n  aspect-ratio: 1 / 1;\n  \n  \n  color: inherit;\n  transition: color var(--ty-transition-fast);\n  \n  flex-shrink: 0;\n  \n  /* Visibility - Force immediate rendering */\n  visibility: visible !important;\n  opacity: 1;\n  \n  /* ANTI-FLICKER: Force browser to paint immediately */\n  will-change: contents;\n  \n  /* Prevent any sub-pixel rendering issues */\n  transform: translateZ(0);\n  -webkit-font-smoothing: antialiased;\n}\n\n/* The SVG element inside shadow DOM (registry / fallback path) */\n:host svg {\n  width: 100%;\n  height: 100%;\n  display: block;\n\n  /* Force immediate SVG rendering */\n  will-change: auto;\n  transform: translateZ(0);\n}\n\n/* Slotted SVG (server-side path: <ty-icon><svg>...</svg></ty-icon>).\n   ::slotted() targets light-DOM children so they fill the host the same way\n   shadow-DOM SVG does. Color is inherited from :host via currentColor. */\n::slotted(svg),\n::slotted(img) {\n  width: 100%;\n  height: 100%;\n  display: block;\n}\n\n/* In a named slot the icon sits alongside text (button start/end), so inline\n   layout is what the host expects there. */\n:host([slot]) {\n  display: inline-flex;\n}\n\n:host(.icon-xs) {\n  width: 0.75em;\n  height: 0.75em;\n}\n\n:host(.icon-sm) {\n  width: 0.875em;\n  height: 0.875em;\n}\n\n:host(.icon-md) {\n  width: 1em;\n  height: 1em;\n}\n\n:host(.icon-lg) {\n  width: 1.25em;\n  height: 1.25em;\n}\n\n:host(.icon-xl) {\n  width: 1.5em;\n  height: 1.5em;\n}\n\n:host(.icon-2xl) {\n  width: 2em;\n  height: 2em;\n}\n\n/* Fixed pixel sizes */\n:host(.icon-12) {\n  width: 12px;\n  height: 12px;\n}\n\n:host(.icon-14) {\n  width: 14px;\n  height: 14px;\n}\n\n:host(.icon-16) {\n  width: 16px;\n  height: 16px;\n}\n\n:host(.icon-18) {\n  width: 18px;\n  height: 18px;\n}\n\n:host(.icon-20) {\n  width: 20px;\n  height: 20px;\n}\n\n:host(.icon-24) {\n  width: 24px;\n  height: 24px;\n}\n\n:host(.icon-32) {\n  width: 32px;\n  height: 32px;\n}\n\n:host(.icon-48) {\n  width: 48px;\n  height: 48px;\n}\n\n:host(.icon-64) {\n  width: 64px;\n  height: 64px;\n}\n\n:host(.icon-80) {\n  width: 80px;\n  height: 80px;\n}\n\n:host(.icon-96) {\n  width: 96px;\n  height: 96px;\n}\n\n:host(.icon-spin) {\n  animation: icon-spin 1s linear infinite;\n}\n\n:host(.icon-spin.icon-tempo-slow) {\n  animation: icon-spin 2s linear infinite;\n}\n\n:host(.icon-spin.icon-tempo-fast) {\n  animation: icon-spin 0.5s linear infinite;\n}\n\n@keyframes icon-spin {\n  from {\n    transform: rotate(0deg);\n  }\n\n  to {\n    transform: rotate(360deg);\n  }\n}\n\n:host(.icon-pulse) {\n  animation: icon-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n}\n\n:host(.icon-pulse.icon-tempo-slow) {\n  animation: icon-pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n}\n\n:host(.icon-pulse.icon-tempo-fast) {\n  animation: icon-pulse 1s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n}\n\n@keyframes icon-pulse {\n  0%,\n  100% {\n    opacity: 1;\n  }\n\n  50% {\n    opacity: 0.5;\n  }\n}\n\n/* Accessibility: ensure icons are not announced by screen readers by default */\n:host {\n  -webkit-user-select: none;\n  user-select: none;\n}\n\n:host(:not(.icon-clickable)) {\n  pointer-events: none;\n}\n\n:host(.icon-clickable) {\n  cursor: pointer;\n  pointer-events: auto;\n  transition: color var(--ty-transition-fast), transform var(--ty-transition-fast);\n}\n\n:host(.icon-clickable:hover) {\n  transform: scale(1.1);\n}\n\n:host(.icon-clickable:active) {\n  transform: scale(0.95);\n}\n\n:host(.icon-disabled) {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n:host(.icon-block) {\n  display: block;\n}\n";