1 line
17 KiB
Plaintext
1 line
17 KiB
Plaintext
{"version":3,"file":"index.cjs","names":["Styles","resetStyles"],"sources":["../../../src/react-renderer/styles/index.ts"],"sourcesContent":["import { Styles } from \"@a2ui/lit/0.8\";\nimport { resetStyles } from \"./reset\";\n\n/**\n * Structural CSS styles from the Lit renderer, converted for global DOM use.\n * These styles define all the utility classes (layout-*, typography-*, color-*, etc.)\n * Converts :host selectors to .a2ui-surface for scoped use outside Shadow DOM.\n */\nexport const structuralStyles: string = Styles.structuralStyles.replace(\n /:host\\s*\\{/g,\n \".a2ui-surface {\",\n);\n\n/**\n * Component-specific styles that replicate Lit's Shadow DOM scoped CSS.\n *\n * Each Lit component has `static styles` with :host, element selectors, and ::slotted().\n * Since React uses Light DOM, we transform these to global CSS scoped under .a2ui-surface.\n *\n * Transformation rules:\n * :host → .a2ui-surface .a2ui-{component}\n * section → .a2ui-surface .a2ui-{component} section\n * ::slotted(*) → .a2ui-surface .a2ui-{component} section > *\n */\nexport const componentSpecificStyles: string = `\n/* =========================================================================\n * Card (from Lit card.ts static styles)\n * ========================================================================= */\n\n/* :host { display: block; flex: var(--weight); min-height: 0; overflow: auto; } */\n.a2ui-surface .a2ui-card {\n display: block;\n flex: var(--weight);\n min-height: 0;\n overflow: auto;\n}\n\n/* section { height: 100%; width: 100%; min-height: 0; overflow: auto; } */\n/* Use > to target only Card's direct section, not nested sections (e.g., TextField's section) */\n.a2ui-surface .a2ui-card > section {\n height: 100%;\n width: 100%;\n min-height: 0;\n overflow: auto;\n}\n\n/* section ::slotted(*) { height: 100%; width: 100%; } */\n/* Use > section > to only target Card's slotted children, not deeply nested elements */\n.a2ui-surface .a2ui-card > section > * {\n height: 100%;\n width: 100%;\n}\n\n/* =========================================================================\n * Divider (from Lit divider.ts static styles)\n * ========================================================================= */\n\n/* :host { display: block; min-height: 0; overflow: auto; } */\n.a2ui-surface .a2ui-divider {\n display: block;\n min-height: 0;\n overflow: auto;\n}\n\n/* hr { height: 1px; background: #ccc; border: none; } */\n/* Use :where() for low specificity (0,0,1) so theme utility classes can override */\n/* Browser default margins apply (margin-block: 0.5em, margin-inline: auto) */\n:where(.a2ui-surface .a2ui-divider) hr {\n height: 1px;\n background: #ccc;\n border: none;\n}\n\n/* =========================================================================\n * Text (from Lit text.ts static styles)\n * ========================================================================= */\n\n/* :host { display: block; flex: var(--weight); } */\n.a2ui-surface .a2ui-text {\n display: block;\n flex: var(--weight);\n}\n\n/* h1, h2, h3, h4, h5 { line-height: inherit; font: inherit; } */\n/* Use :where() to match Lit's low specificity (0,0,0,1 - just element) */\n:where(.a2ui-surface .a2ui-text) h1,\n:where(.a2ui-surface .a2ui-text) h2,\n:where(.a2ui-surface .a2ui-text) h3,\n:where(.a2ui-surface .a2ui-text) h4,\n:where(.a2ui-surface .a2ui-text) h5 {\n line-height: inherit;\n font: inherit;\n}\n\n/* Ensure markdown paragraph margins are reset */\n.a2ui-surface .a2ui-text p {\n margin: 0;\n}\n\n/* =========================================================================\n * TextField (from Lit text-field.ts static styles)\n * ========================================================================= */\n\n/* :host { display: flex; flex: var(--weight); } */\n.a2ui-surface .a2ui-textfield {\n display: flex;\n flex: var(--weight);\n}\n\n/* input { display: block; width: 100%; } */\n:where(.a2ui-surface .a2ui-textfield) input {\n display: block;\n width: 100%;\n}\n\n/* label { display: block; margin-bottom: 4px; } */\n:where(.a2ui-surface .a2ui-textfield) label {\n display: block;\n margin-bottom: 4px;\n}\n\n/* textarea - same styling as input for multiline text fields */\n:where(.a2ui-surface .a2ui-textfield) textarea {\n display: block;\n width: 100%;\n}\n\n/* =========================================================================\n * CheckBox (from Lit checkbox.ts static styles)\n * ========================================================================= */\n\n/* :host { display: block; flex: var(--weight); min-height: 0; overflow: auto; } */\n.a2ui-surface .a2ui-checkbox {\n display: block;\n flex: var(--weight);\n min-height: 0;\n overflow: auto;\n}\n\n/* input { display: block; width: 100%; } */\n:where(.a2ui-surface .a2ui-checkbox) input {\n display: block;\n width: 100%;\n}\n\n/* =========================================================================\n * Slider (from Lit slider.ts static styles)\n * ========================================================================= */\n\n/* :host { display: block; flex: var(--weight); } */\n.a2ui-surface .a2ui-slider {\n display: block;\n flex: var(--weight);\n}\n\n/* input { display: block; width: 100%; } */\n:where(.a2ui-surface .a2ui-slider) input {\n display: block;\n width: 100%;\n}\n\n/* =========================================================================\n * Button (from Lit button.ts static styles)\n * ========================================================================= */\n\n/* :host { display: block; flex: var(--weight); min-height: 0; } */\n.a2ui-surface .a2ui-button {\n display: block;\n flex: var(--weight);\n min-height: 0;\n}\n\n/* =========================================================================\n * Icon (from Lit icon.ts static styles)\n * ========================================================================= */\n\n/* :host { display: block; flex: var(--weight); min-height: 0; overflow: auto; } */\n.a2ui-surface .a2ui-icon {\n display: block;\n flex: var(--weight);\n min-height: 0;\n overflow: auto;\n}\n\n/* =========================================================================\n * Tabs (from Lit tabs.ts static styles)\n * ========================================================================= */\n\n/* :host { display: block; flex: var(--weight); } */\n.a2ui-surface .a2ui-tabs {\n display: block;\n flex: var(--weight);\n}\n\n/* =========================================================================\n * Modal (from Lit modal.ts static styles)\n * ========================================================================= */\n\n/* :host { display: block; flex: var(--weight); } */\n.a2ui-surface .a2ui-modal {\n display: block;\n flex: var(--weight);\n}\n\n/* dialog { padding: 0; border: none; background: none; } */\n:where(.a2ui-surface .a2ui-modal) dialog {\n padding: 0;\n border: none;\n background: none;\n}\n\n/* dialog section #controls { display: flex; justify-content: end; margin-bottom: 4px; } */\n.a2ui-surface .a2ui-modal dialog section #controls {\n display: flex;\n justify-content: end;\n margin-bottom: 4px;\n}\n\n/* dialog section #controls button { padding: 0; background: none; ... } */\n.a2ui-surface .a2ui-modal dialog section #controls button {\n padding: 0;\n background: none;\n width: 20px;\n height: 20px;\n cursor: pointer;\n border: none;\n}\n\n/* =========================================================================\n * Image (from Lit image.ts static styles)\n * ========================================================================= */\n\n/* :host { display: block; flex: var(--weight); min-height: 0; overflow: auto; } */\n.a2ui-surface .a2ui-image {\n display: block;\n flex: var(--weight);\n min-height: 0;\n overflow: auto;\n}\n\n/* img { display: block; width: 100%; height: 100%; object-fit: var(--object-fit, fill); } */\n:where(.a2ui-surface .a2ui-image) img {\n display: block;\n width: 100%;\n height: 100%;\n object-fit: var(--object-fit, fill);\n}\n\n/* =========================================================================\n * Video (from Lit video.ts static styles)\n * ========================================================================= */\n\n/* :host { display: block; flex: var(--weight); min-height: 0; overflow: auto; } */\n.a2ui-surface .a2ui-video {\n display: block;\n flex: var(--weight);\n min-height: 0;\n overflow: auto;\n}\n\n/* video { display: block; width: 100%; } */\n:where(.a2ui-surface .a2ui-video) video {\n display: block;\n width: 100%;\n}\n\n/* =========================================================================\n * AudioPlayer (from Lit audio.ts static styles)\n * ========================================================================= */\n\n/* :host { display: block; flex: var(--weight); min-height: 0; overflow: auto; } */\n.a2ui-surface .a2ui-audio {\n display: block;\n flex: var(--weight);\n min-height: 0;\n overflow: auto;\n}\n\n/* audio { display: block; width: 100%; } */\n:where(.a2ui-surface .a2ui-audio) audio {\n display: block;\n width: 100%;\n}\n\n/* =========================================================================\n * MultipleChoice (from Lit multiple-choice.ts static styles)\n * ========================================================================= */\n\n/* :host { display: block; flex: var(--weight); min-height: 0; overflow: auto; } */\n.a2ui-surface .a2ui-multiplechoice {\n display: block;\n flex: var(--weight);\n min-height: 0;\n overflow: auto;\n}\n\n/* select { width: 100%; } */\n:where(.a2ui-surface .a2ui-multiplechoice) select {\n width: 100%;\n}\n\n/* =========================================================================\n * Column (from Lit column.ts static styles)\n * ========================================================================= */\n\n/* :host { display: flex; flex: var(--weight); } */\n.a2ui-surface .a2ui-column {\n display: flex;\n flex: var(--weight);\n}\n\n/* section { display: flex; flex-direction: column; min-width: 100%; height: 100%; } */\n.a2ui-surface .a2ui-column > section {\n display: flex;\n flex-direction: column;\n min-width: 100%;\n height: 100%;\n}\n\n/* :host([alignment=\"...\"]) section { align-items: ...; } */\n/* Use > section to only target Column's direct section, not nested sections (e.g., CheckBox's section) */\n.a2ui-surface .a2ui-column[data-alignment=\"start\"] > section { align-items: start; }\n.a2ui-surface .a2ui-column[data-alignment=\"center\"] > section { align-items: center; }\n.a2ui-surface .a2ui-column[data-alignment=\"end\"] > section { align-items: end; }\n.a2ui-surface .a2ui-column[data-alignment=\"stretch\"] > section { align-items: stretch; }\n\n/* :host([distribution=\"...\"]) section { justify-content: ...; } */\n.a2ui-surface .a2ui-column[data-distribution=\"start\"] > section { justify-content: start; }\n.a2ui-surface .a2ui-column[data-distribution=\"center\"] > section { justify-content: center; }\n.a2ui-surface .a2ui-column[data-distribution=\"end\"] > section { justify-content: end; }\n.a2ui-surface .a2ui-column[data-distribution=\"spaceBetween\"] > section { justify-content: space-between; }\n.a2ui-surface .a2ui-column[data-distribution=\"spaceAround\"] > section { justify-content: space-around; }\n.a2ui-surface .a2ui-column[data-distribution=\"spaceEvenly\"] > section { justify-content: space-evenly; }\n\n/* =========================================================================\n * Row (from Lit row.ts static styles)\n * ========================================================================= */\n\n/* :host { display: flex; flex: var(--weight); } */\n.a2ui-surface .a2ui-row {\n display: flex;\n flex: var(--weight);\n}\n\n/* section { display: flex; flex-direction: row; width: 100%; min-height: 100%; } */\n.a2ui-surface .a2ui-row > section {\n display: flex;\n flex-direction: row;\n width: 100%;\n min-height: 100%;\n}\n\n/* :host([alignment=\"...\"]) section { align-items: ...; } */\n/* Use > section to only target Row's direct section, not nested sections */\n.a2ui-surface .a2ui-row[data-alignment=\"start\"] > section { align-items: start; }\n.a2ui-surface .a2ui-row[data-alignment=\"center\"] > section { align-items: center; }\n.a2ui-surface .a2ui-row[data-alignment=\"end\"] > section { align-items: end; }\n.a2ui-surface .a2ui-row[data-alignment=\"stretch\"] > section { align-items: stretch; }\n\n/* :host([distribution=\"...\"]) section { justify-content: ...; } */\n.a2ui-surface .a2ui-row[data-distribution=\"start\"] > section { justify-content: start; }\n.a2ui-surface .a2ui-row[data-distribution=\"center\"] > section { justify-content: center; }\n.a2ui-surface .a2ui-row[data-distribution=\"end\"] > section { justify-content: end; }\n.a2ui-surface .a2ui-row[data-distribution=\"spaceBetween\"] > section { justify-content: space-between; }\n.a2ui-surface .a2ui-row[data-distribution=\"spaceAround\"] > section { justify-content: space-around; }\n.a2ui-surface .a2ui-row[data-distribution=\"spaceEvenly\"] > section { justify-content: space-evenly; }\n\n/* =========================================================================\n * List (from Lit list.ts static styles)\n * ========================================================================= */\n\n/* :host { display: block; flex: var(--weight); min-height: 0; overflow: auto; } */\n.a2ui-surface .a2ui-list {\n display: block;\n flex: var(--weight);\n min-height: 0;\n overflow: auto;\n}\n\n/* :host([direction=\"vertical\"]) section { display: grid; } */\n.a2ui-surface .a2ui-list[data-direction=\"vertical\"] > section {\n display: grid;\n}\n\n/* :host([direction=\"horizontal\"]) section { display: flex; max-width: 100%; overflow-x: scroll; ... } */\n.a2ui-surface .a2ui-list[data-direction=\"horizontal\"] > section {\n display: flex;\n max-width: 100%;\n overflow-x: scroll;\n overflow-y: hidden;\n scrollbar-width: none;\n}\n\n/* :host([direction=\"horizontal\"]) section > ::slotted(*) { flex: 1 0 fit-content; ... } */\n.a2ui-surface .a2ui-list[data-direction=\"horizontal\"] > section > * {\n flex: 1 0 fit-content;\n max-width: min(80%, 400px);\n}\n\n/* =========================================================================\n * DateTimeInput (from Lit datetime-input.ts static styles)\n * ========================================================================= */\n\n/* :host { display: block; flex: var(--weight); min-height: 0; overflow: auto; } */\n.a2ui-surface .a2ui-datetime-input {\n display: block;\n flex: var(--weight);\n min-height: 0;\n overflow: auto;\n}\n\n/* input { display: block; border-radius: 8px; padding: 8px; border: 1px solid #ccc; width: 100%; } */\n/* Use :where() to match Lit's low specificity (0,0,0,1) so theme utility classes can override */\n:where(.a2ui-surface .a2ui-datetime-input) input {\n display: block;\n border-radius: 8px;\n padding: 8px;\n border: 1px solid #ccc;\n width: 100%;\n}\n\n/* =========================================================================\n * Global box-sizing (matches Lit's * { box-sizing: border-box; } in components)\n * ========================================================================= */\n\n.a2ui-surface *,\n.a2ui-surface *::before,\n.a2ui-surface *::after {\n box-sizing: border-box;\n}\n`;\n\n/**\n * Injects A2UI structural styles into the document head.\n * Includes utility classes (layout-*, typography-*, color-*, etc.) and React-specific overrides.\n * Call this once at application startup.\n *\n * NOTE: CSS variables (--n-*, --p-*, etc.) must be defined by the host application on :root,\n * just like in the Lit renderer. This allows full customization of the color palette.\n *\n * @example\n * ```tsx\n * import { injectStyles } from '@a2ui/react/styles';\n *\n * // In your app entry point:\n * injectStyles();\n * ```\n */\nexport function injectStyles(): void {\n if (typeof document === \"undefined\") {\n return; // SSR safety\n }\n\n const styleId = \"a2ui-structural-styles\";\n\n // Avoid duplicate injection\n if (document.getElementById(styleId)) {\n return;\n }\n\n const styleElement = document.createElement(\"style\");\n styleElement.id = styleId;\n // Include structural (utility classes) and component-specific styles\n // Note: CSS variables (palette) must be defined by the host application on :root,\n // just like in the Lit renderer. This allows full customization.\n styleElement.textContent =\n resetStyles + \"\\n\" + structuralStyles + \"\\n\" + componentSpecificStyles;\n document.head.appendChild(styleElement);\n}\n\n/**\n * Removes injected A2UI styles from the document.\n * Useful for cleanup in tests or when unmounting.\n */\nexport function removeStyles(): void {\n if (typeof document === \"undefined\") {\n return;\n }\n\n const styleElement = document.getElementById(\"a2ui-structural-styles\");\n if (styleElement) {\n styleElement.remove();\n }\n}\n"],"mappings":";;;;;;;;;;AAQA,MAAa,mBAA2BA,qBAAO,iBAAiB,QAC9D,eACA,kBACD;;;;;;;;;;;;AAaD,MAAa,0BAAkC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwa/C,SAAgB,eAAqB;AACnC,KAAI,OAAO,aAAa,YACtB;CAGF,MAAM,UAAU;AAGhB,KAAI,SAAS,eAAe,QAAQ,CAClC;CAGF,MAAM,eAAe,SAAS,cAAc,QAAQ;AACpD,cAAa,KAAK;AAIlB,cAAa,cACXC,4BAAc,OAAO,mBAAmB,OAAO;AACjD,UAAS,KAAK,YAAY,aAAa;;;;;;AAOzC,SAAgB,eAAqB;AACnC,KAAI,OAAO,aAAa,YACtB;CAGF,MAAM,eAAe,SAAS,eAAe,yBAAyB;AACtE,KAAI,aACF,cAAa,QAAQ"} |