@fusion.dev/helix 0.0.0-dev

package/elements.css

@@ -0,0 +1,287 @@
+/* Generated by tooling/scripts/build-elements-css.mjs. Do not edit.
+ *
+ * Import once, beside the base layer, in any app that uses Helix elements:
+ *
+ *   import '@fusion.dev/helix/elements.css'
+ *
+ * Without it, every component renders as unstyled light-DOM content until its
+ * definition loads and then snaps into place. With it, the element reserves its
+ * place in the layout and reveals itself already styled.
+ *
+ * `visibility` rather than `display`, so the element still takes part in
+ * layout and the page does not reflow when it upgrades. The content is in the
+ * markup either way, so a crawler reads it regardless.
+ */
+helix-accordion:not(:defined),
+helix-accordion-item:not(:defined),
+helix-announcement:not(:defined),
+helix-app-header:not(:defined),
+helix-aura:not(:defined),
+helix-avatar:not(:defined),
+helix-avatar-group:not(:defined),
+helix-badge:not(:defined),
+helix-bar-chart:not(:defined),
+helix-blockquote:not(:defined),
+helix-breadcrumb:not(:defined),
+helix-breadcrumbs:not(:defined),
+helix-button:not(:defined),
+helix-button-group:not(:defined),
+helix-callout:not(:defined),
+helix-card:not(:defined),
+helix-carousel:not(:defined),
+helix-chat:not(:defined),
+helix-chat-composer:not(:defined),
+helix-chat-message:not(:defined),
+helix-checkbox:not(:defined),
+helix-checkbox-group:not(:defined),
+helix-code:not(:defined),
+helix-code-block:not(:defined),
+helix-color-input:not(:defined),
+helix-color-picker:not(:defined),
+helix-combobox:not(:defined),
+helix-command:not(:defined),
+helix-copy-button:not(:defined),
+helix-data-table:not(:defined),
+helix-date-input:not(:defined),
+helix-date-picker:not(:defined),
+helix-dialog:not(:defined),
+helix-divider:not(:defined),
+helix-donut-chart:not(:defined),
+helix-drawer:not(:defined),
+helix-drilldown:not(:defined),
+helix-drilldown-item:not(:defined),
+helix-empty:not(:defined),
+helix-file-input:not(:defined),
+helix-flex:not(:defined),
+helix-format-date:not(:defined),
+helix-grid:not(:defined),
+helix-heatmap:not(:defined),
+helix-icon:not(:defined),
+helix-icon-button:not(:defined),
+helix-image:not(:defined),
+helix-input:not(:defined),
+helix-kbd:not(:defined),
+helix-legend:not(:defined),
+helix-line-chart:not(:defined),
+helix-list:not(:defined),
+helix-list-item:not(:defined),
+helix-listbox:not(:defined),
+helix-loader:not(:defined),
+helix-megamenu:not(:defined),
+helix-menu:not(:defined),
+helix-menu-item:not(:defined),
+helix-meter:not(:defined),
+helix-navigation:not(:defined),
+helix-notification:not(:defined),
+helix-notifications:not(:defined),
+helix-number-input:not(:defined),
+helix-option:not(:defined),
+helix-option-group:not(:defined),
+helix-outline:not(:defined),
+helix-pagination:not(:defined),
+helix-pagination-size:not(:defined),
+helix-pagination-summary:not(:defined),
+helix-pin-input:not(:defined),
+helix-popover:not(:defined),
+helix-progress:not(:defined),
+helix-qr-code:not(:defined),
+helix-quote:not(:defined),
+helix-radio:not(:defined),
+helix-radio-group:not(:defined),
+helix-rating:not(:defined),
+helix-sandbox:not(:defined),
+helix-sandbox-preview:not(:defined),
+helix-sandbox-source:not(:defined),
+helix-sandbox-status-bar:not(:defined),
+helix-sandbox-terminal:not(:defined),
+helix-sandbox-toolbar:not(:defined),
+helix-scroll-area:not(:defined),
+helix-select:not(:defined),
+helix-skeleton:not(:defined),
+helix-slider:not(:defined),
+helix-sparkline:not(:defined),
+helix-speed-dial:not(:defined),
+helix-speed-dial-item:not(:defined),
+helix-splitter:not(:defined),
+helix-stat:not(:defined),
+helix-stat-group:not(:defined),
+helix-step:not(:defined),
+helix-steps:not(:defined),
+helix-switch:not(:defined),
+helix-tab:not(:defined),
+helix-tab-panel:not(:defined),
+helix-table:not(:defined),
+helix-table-cell:not(:defined),
+helix-table-column:not(:defined),
+helix-table-row:not(:defined),
+helix-tabs:not(:defined),
+helix-tag:not(:defined),
+helix-text:not(:defined),
+helix-textarea:not(:defined),
+helix-time-input:not(:defined),
+helix-time-picker:not(:defined),
+helix-timeline:not(:defined),
+helix-timeline-item:not(:defined),
+helix-toast:not(:defined),
+helix-toast-item:not(:defined),
+helix-toggle:not(:defined),
+helix-toggle-group:not(:defined),
+helix-toolbar:not(:defined),
+helix-tooltip:not(:defined),
+helix-tour:not(:defined),
+helix-tour-stop:not(:defined),
+helix-tree:not(:defined),
+helix-tree-item:not(:defined),
+helix-trend:not(:defined),
+helix-video:not(:defined),
+helix-video-playlist:not(:defined),
+helix-video-playlist-item:not(:defined),
+helix-video-playlist-menu:not(:defined),
+helix-virtual-list:not(:defined) {
+  visibility: hidden;
+}
+
+/* `align` is a legacy presentational hint, and a browser applies it to any
+ * element it appears on, including one it has never heard of. So a component
+ * with an `align` property for its own layout silently gets `text-align` as
+ * well: every `<helix-flex align="center">` was centering its text, which is a
+ * thing nobody asked for and nothing in the component could be blamed for.
+ *
+ * Neutralised here rather than in each component, which is where it was. Flex
+ * and Grid both remembered and both were right, and nothing would have told the
+ * next one. Enumerated for the same reason the rule above is: CSS cannot select
+ * "any custom element".
+ *
+ * `:where()` keeps this at zero specificity, so a consumer setting
+ * `text-align` on the same element still wins.
+ */
+:where(
+helix-accordion[align],
+helix-accordion-item[align],
+helix-announcement[align],
+helix-app-header[align],
+helix-aura[align],
+helix-avatar[align],
+helix-avatar-group[align],
+helix-badge[align],
+helix-bar-chart[align],
+helix-blockquote[align],
+helix-breadcrumb[align],
+helix-breadcrumbs[align],
+helix-button[align],
+helix-button-group[align],
+helix-callout[align],
+helix-card[align],
+helix-carousel[align],
+helix-chat[align],
+helix-chat-composer[align],
+helix-chat-message[align],
+helix-checkbox[align],
+helix-checkbox-group[align],
+helix-code[align],
+helix-code-block[align],
+helix-color-input[align],
+helix-color-picker[align],
+helix-combobox[align],
+helix-command[align],
+helix-copy-button[align],
+helix-data-table[align],
+helix-date-input[align],
+helix-date-picker[align],
+helix-dialog[align],
+helix-divider[align],
+helix-donut-chart[align],
+helix-drawer[align],
+helix-drilldown[align],
+helix-drilldown-item[align],
+helix-empty[align],
+helix-file-input[align],
+helix-flex[align],
+helix-format-date[align],
+helix-grid[align],
+helix-heatmap[align],
+helix-icon[align],
+helix-icon-button[align],
+helix-image[align],
+helix-input[align],
+helix-kbd[align],
+helix-legend[align],
+helix-line-chart[align],
+helix-list[align],
+helix-list-item[align],
+helix-listbox[align],
+helix-loader[align],
+helix-megamenu[align],
+helix-menu[align],
+helix-menu-item[align],
+helix-meter[align],
+helix-navigation[align],
+helix-notification[align],
+helix-notifications[align],
+helix-number-input[align],
+helix-option[align],
+helix-option-group[align],
+helix-outline[align],
+helix-pagination[align],
+helix-pagination-size[align],
+helix-pagination-summary[align],
+helix-pin-input[align],
+helix-popover[align],
+helix-progress[align],
+helix-qr-code[align],
+helix-quote[align],
+helix-radio[align],
+helix-radio-group[align],
+helix-rating[align],
+helix-sandbox[align],
+helix-sandbox-preview[align],
+helix-sandbox-source[align],
+helix-sandbox-status-bar[align],
+helix-sandbox-terminal[align],
+helix-sandbox-toolbar[align],
+helix-scroll-area[align],
+helix-select[align],
+helix-skeleton[align],
+helix-slider[align],
+helix-sparkline[align],
+helix-speed-dial[align],
+helix-speed-dial-item[align],
+helix-splitter[align],
+helix-stat[align],
+helix-stat-group[align],
+helix-step[align],
+helix-steps[align],
+helix-switch[align],
+helix-tab[align],
+helix-tab-panel[align],
+helix-table[align],
+helix-table-cell[align],
+helix-table-column[align],
+helix-table-row[align],
+helix-tabs[align],
+helix-tag[align],
+helix-text[align],
+helix-textarea[align],
+helix-time-input[align],
+helix-time-picker[align],
+helix-timeline[align],
+helix-timeline-item[align],
+helix-toast[align],
+helix-toast-item[align],
+helix-toggle[align],
+helix-toggle-group[align],
+helix-toolbar[align],
+helix-tooltip[align],
+helix-tour[align],
+helix-tour-stop[align],
+helix-tree[align],
+helix-tree-item[align],
+helix-trend[align],
+helix-video[align],
+helix-video-playlist[align],
+helix-video-playlist-item[align],
+helix-video-playlist-menu[align],
+helix-virtual-list[align]
+) {
+  text-align: inherit;
+}