opui-css 4.0.1 → 5.0.0

package/components/IconButton/IconButton.astro

@@ -23,4 +23,4 @@ const {
 ---
 
 <!-- prettier-ignore -->
-<Tag class:list={["icon-button", size, variant, color, className]} href={href} {...rest}><slot /></Tag>
+<Tag class:list={["ui-icon-button", size && `ui-${size}`, variant && `ui-${variant}`, color && `ui-${color}`, className]} href={href} {...rest}><slot /></Tag>

package/components/List/List.astro

@@ -21,13 +21,13 @@ const {
 
 <ul
   class:list={[
-    "list",
+    "ui-list",
     {
-      bordered,
-      dense,
-      gutterless,
+      "ui-bordered": bordered,
+      "ui-dense": dense,
+      "ui-gutterless": gutterless,
     },
-    variant,
+    variant && `ui-${variant}`,
     className,
   ]}
   {...rest}

package/components/ListItem/ListItem.astro

@@ -35,8 +35,8 @@ const innerProps = Tag ? rest : {}
 <li
   class:list={[
     {
-      "border-top": borderTop,
-      inset,
+      "ui-border-top": borderTop,
+      "ui-inset": inset,
     },
     className,
   ]}
@@ -45,21 +45,21 @@ const innerProps = Tag ? rest : {}
   {
     // Label + checkbox/radio/switch
     hasLabel ? (
-      <label class={labelClass} for={htmlFor}>
+      <label class={labelClass && `ui-${labelClass}`} for={htmlFor}>
         {Astro.slots.start && (
-          <div class="start">
+          <div class="ui-start">
             <slot name="start" />
           </div>
         )}
         {Astro.slots.text || headline || description ? (
-          <div class="text">
+          <div class="ui-text">
             {headline && <p>{headline}</p>}
             {description && <p>{description}</p>}
             <slot name="text" />
           </div>
         ) : null}
         {Astro.slots.end && (
-          <div class="end">
+          <div class="ui-end">
             <slot name="end" />
           </div>
         )}
@@ -69,12 +69,12 @@ const innerProps = Tag ? rest : {}
     Tag ? (
       <Tag {...innerProps}>
         {Astro.slots.start && (
-          <div class="start">
+          <div class="ui-start">
             <slot name="start" />
           </div>
         )}
         {headline || description || Astro.slots.text ? (
-          <div class="text">
+          <div class="ui-text">
             {headline && <p>{headline}</p>}
             {description && <p>{description}</p>}
             <slot name="text" />
@@ -84,7 +84,7 @@ const innerProps = Tag ? rest : {}
           <slot />
         )}
         {Astro.slots.end && (
-          <div class="end">
+          <div class="ui-end">
             <slot name="end" />
           </div>
         )}
@@ -93,12 +93,12 @@ const innerProps = Tag ? rest : {}
       // Without custom tag
       <>
         {Astro.slots.start && (
-          <div class="start">
+          <div class="ui-start">
             <slot name="start" />
           </div>
         )}
         {headline || description || Astro.slots.text ? (
-          <div class="text">
+          <div class="ui-text">
             {headline && <p>{headline}</p>}
             {description && <p>{description}</p>}
             <slot name="text" />
@@ -108,7 +108,7 @@ const innerProps = Tag ? rest : {}
           <slot />
         )}
         {Astro.slots.end && (
-          <div class="end">
+          <div class="ui-end">
             <slot name="end" />
           </div>
         )}

package/components/Progress/Progress.astro

@@ -30,7 +30,7 @@ const {
   aria-busy={ariaBusy}
   aria-describedby={ariaDescribedby}
   aria-label={ariaLabel}
-  class:list={["progress", className, variant]}
+  class:list={["ui-progress", className, variant && `ui-${variant}`]}
   id={id}
   max={max}
   value={value}

package/components/Radio/Radio.astro

@@ -41,10 +41,10 @@ const finalName = name || currentFieldName
 
 <label
   class:list={[
-    "radio",
-    size,
+    "ui-radio",
+    size && `ui-${size}`,
     {
-      stack,
+      "ui-stack": stack,
     },
     className,
   ]}
@@ -60,11 +60,11 @@ const finalName = name || currentFieldName
     {value}
     {...rest}
   />
-  <!-- prettier-ignore --><span class:list={[hideLabel ? "sr-only" : "label"]}><slot /></span>
+  <!-- prettier-ignore --><span class:list={[hideLabel ? "ui-sr-only" : "ui-label"]}><slot /></span>
   {
     Astro.slots.has("end-text") && (
       <!-- prettier-ignore -->
-      <span id={endTextId} class="end-text"><slot name="end-text" /></span>
+      <span id={endTextId} class="ui-end-text"><slot name="end-text" /></span>
     )
   }
 </label>

package/components/Range/Range.astro

@@ -60,23 +60,23 @@ const endTextId = hasEndText ? $id("range-end") : undefined
 const describedBy = [startTextId, endTextId].filter(Boolean).join(" ") || undefined
 ---
 
-<label class:list={["range", variant, { spread }, className]}>
+<label class:list={["ui-range", variant && `ui-${variant}`, { "ui-spread": spread }, className]}>
   {
     hasLabel && (
       <!-- prettier-ignore -->
-      <span class="label" id={labelId}>{label}<slot /></span>
+      <span class="ui-label" id={labelId}>{label}<slot /></span>
     )
   }
   {
     hasValue && (
-      <output class="value" for={inputId} data-suffix={valueSuffix}>
+      <output class="ui-value" for={inputId} data-suffix={valueSuffix}>
         <slot name="value">{value}</slot>
       </output>
     )
   }
   {
     hasStartText && (
-      <span class="start-text" id={startTextId}>
+      <span class="ui-start-text" id={startTextId}>
         {startText}<slot name="start-text" />
       </span>
     )
@@ -111,7 +111,7 @@ const describedBy = [startTextId, endTextId].filter(Boolean).join(" ") || undefi
   }
   {
     hasEndText && (
-      <span class="end-text" id={endTextId}>
+      <span class="ui-end-text" id={endTextId}>
         {endText}<slot name="end-text" />
       </span>
     )
@@ -120,11 +120,11 @@ const describedBy = [startTextId, endTextId].filter(Boolean).join(" ") || undefi
 
 <script>
   // Mirror the slider's current value into its associated <output> on every
-  // input event. Idempotent: each .range is wired once, and ignores ranges
+  // input event. Idempotent: each .ui-range is wired once, and ignores ranges
   // without a value display.
-  for (const range of document.querySelectorAll<HTMLElement>(".range")) {
+  for (const range of document.querySelectorAll<HTMLElement>(".ui-range")) {
     const input = range.querySelector<HTMLInputElement>('input[type="range"]')
-    const output = range.querySelector<HTMLOutputElement>(":scope > output.value")
+    const output = range.querySelector<HTMLOutputElement>(":scope > output.ui-value")
     if (!input || !output) continue
     const suffix = output.dataset.suffix ?? ""
     const update = () => {

package/components/Select/Select.astro

@@ -52,11 +52,11 @@ const labelId = $id("select-label")
 
 <label
   class:list={[
-    "select",
-    size,
+    "ui-select",
+    size && `ui-${size}`,
     {
-      filled: variant === "filled",
-      spread,
+      "ui-filled": variant === "filled",
+      "ui-spread": spread,
     },
     className,
   ]}
@@ -65,16 +65,16 @@ const labelId = $id("select-label")
   {
     (label || Astro.slots.has("label")) && (
       <!-- prettier-ignore -->
-      <span class="label" id={labelId}>{label}<slot name="label" /></span>
+      <span class="ui-label" id={labelId}>{label}<slot name="label" /></span>
     )
   }
   {
     (description || Astro.slots.has("description")) && (
       <!-- prettier-ignore -->
-      <span class="start-text">{description}<slot name="description" /></span>
+      <span class="ui-start-text">{description}<slot name="description" /></span>
     )
   }
-  <span class="field">
+  <span class="ui-field">
     <select
       aria-labelledby={label ? labelId : undefined}
       disabled={disabled}
@@ -87,20 +87,20 @@ const labelId = $id("select-label")
       <button>
         <selectedcontent></selectedcontent>
       </button>
-      <div class:list={["list", { dense }]}>
+      <div class:list={["ui-list", { "ui-dense": dense }]}>
         {items.map((item) => <option value={item.value}>{item.text}</option>)}
         <slot />
       </div>
     </select>
-    {Astro.slots.has("prefix") && <span class="prefix"><slot name="prefix" /></span>}
-    {Astro.slots.has("suffix") && <span class="suffix"><slot name="suffix" /></span>}
-    {Astro.slots.has("header") && <span class="header"><slot name="header" /></span>}
-    {Astro.slots.has("footer") && <span class="footer"><slot name="footer" /></span>}
+    {Astro.slots.has("prefix") && <span class="ui-prefix"><slot name="prefix" /></span>}
+    {Astro.slots.has("suffix") && <span class="ui-suffix"><slot name="suffix" /></span>}
+    {Astro.slots.has("header") && <span class="ui-header"><slot name="header" /></span>}
+    {Astro.slots.has("footer") && <span class="ui-footer"><slot name="footer" /></span>}
   </span>
   {
     (endText || Astro.slots.has("end-text")) && (
       <!-- prettier-ignore -->
-      <span id={$id("end-text")} class="end-text">{endText}<slot name="end-text" /></span>
+      <span id={$id("end-text")} class="ui-end-text">{endText}<slot name="end-text" /></span>
     )
   }
 </label>

package/components/Switch/Switch.astro

@@ -54,11 +54,11 @@ if (
 
 <label
   class:list={[
-    "switch",
+    "ui-switch",
     {
-      small,
-      stack,
-      spread,
+      "ui-small": small,
+      "ui-stack": stack,
+      "ui-spread": spread,
     },
     className,
   ]}
@@ -66,14 +66,14 @@ if (
 >
   {
     Astro.slots.has("icon-unchecked") && (
-      <span class="icon-unchecked" aria-hidden="true">
+      <span class="ui-icon-unchecked" aria-hidden="true">
         <slot name="icon-unchecked" />
       </span>
     )
   }
   {
     Astro.slots.has("icon-checked") && (
-      <span class="icon-checked" aria-hidden="true">
+      <span class="ui-icon-checked" aria-hidden="true">
         <slot name="icon-checked" />
       </span>
     )
@@ -90,12 +90,12 @@ if (
   />
   {
     Astro.slots.has("default") && (
-    <!-- prettier-ignore --><span class:list={[hideLabel ? "sr-only" : "label"]}><slot /></span>)
+    <!-- prettier-ignore --><span class:list={[hideLabel ? "ui-sr-only" : "ui-label"]}><slot /></span>)
   }
     {
       Astro.slots.has("end-text") && (
         <!-- prettier-ignore -->
-        <span id={endTextId} class="end-text"><slot name="end-text" /></span>
+        <span id={endTextId} class="ui-end-text"><slot name="end-text" /></span>
       )
     }
 </label>

package/components/Table/Table.astro

@@ -10,6 +10,9 @@ export const title = "Table"
 const { class: className, variant, ...rest } = Astro.props
 ---
 
-<table class:list={[className, variant]} {...rest}>
+<table
+  class:list={["ui-table", className, variant && `ui-${variant}`]}
+  {...rest}
+>
   <slot />
 </table>

package/components/Tabs/Tabs.astro

@@ -21,7 +21,7 @@ Astro.locals.tabsGroupName = originalGroupName
 ---
 
 <div
-  class:list={["tabs", className]}
+  class:list={["ui-tabs", className]}
   role="tablist"
   {...rest}
   set:html={html}

package/components/Tabs/TabsItem.astro

@@ -38,7 +38,7 @@ Astro.locals.tabsGroupName = originalGroupName
 <input
   aria-controls={panelId}
   checked={open}
-  class:list={["tab-input", className]}
+  class:list={["ui-tab-input", className]}
   id={tabId}
   name={tabsGroupName}
   type="radio"

package/components/Tabs/TabsPanel.astro

@@ -12,7 +12,7 @@ const { currentPanelId, currentTabId } = Astro.locals
 
 <div
   id={panelId || currentPanelId}
-  class:list={["tab-panel", className]}
+  class:list={["ui-tab-panel", className]}
   role="tabpanel"
   aria-labelledby={tabId || currentTabId}
   {...rest}

package/components/Tabs/TabsTab.astro

@@ -11,7 +11,7 @@ const { currentTabId } = Astro.locals
 
 <label
   for={tabId || currentTabId}
-  class:list={["tab-label", className]}
+  class:list={["ui-tab-label", className]}
   role="tab"
   {...rest}
 >

package/components/TextField/TextField.astro

@@ -73,12 +73,12 @@ const fieldName = name || currentFieldName
 
 <label
   class:list={[
-    "text-field",
+    "ui-text-field",
     {
-      "auto-fit": autoFit,
-      filled,
-      spread,
-      small,
+      "ui-auto-fit": autoFit,
+      "ui-filled": filled,
+      "ui-spread": spread,
+      "ui-small": small,
     },
     className,
   ]}
@@ -88,16 +88,16 @@ const fieldName = name || currentFieldName
   {
     (label || Astro.slots.has("label")) && (
       <!-- prettier-ignore -->
-      <span class="label">{label}<slot name="label" /></span>
+      <span class="ui-label">{label}<slot name="label" /></span>
     )
   }
   {
     (startTextValue || Astro.slots.has("description")) && (
       <!-- prettier-ignore -->
-      <span class="start-text">{startTextValue}<slot name="description" /></span>
+      <span class="ui-start-text">{startTextValue}<slot name="description" /></span>
     )
   }
-  <span class="field">
+  <span class="ui-field">
     <input
       disabled={disabled}
       id={fieldId}
@@ -113,15 +113,15 @@ const fieldName = name || currentFieldName
       type={type === "numeric" ? "text" : type}
       value={value}
     />
-    {Astro.slots.has("prefix") && <span class="prefix"><slot name="prefix" /></span>}
-    {Astro.slots.has("suffix") && <span class="suffix"><slot name="suffix" /></span>}
-    {Astro.slots.has("header") && <span class="header"><slot name="header" /></span>}
-    {Astro.slots.has("footer") && <span class="footer"><slot name="footer" /></span>}
+    {Astro.slots.has("prefix") && <span class="ui-prefix"><slot name="prefix" /></span>}
+    {Astro.slots.has("suffix") && <span class="ui-suffix"><slot name="suffix" /></span>}
+    {Astro.slots.has("header") && <span class="ui-header"><slot name="header" /></span>}
+    {Astro.slots.has("footer") && <span class="ui-footer"><slot name="footer" /></span>}
   </span>
   {
     (endText || Astro.slots.has("end-text") || Astro.slots.has("supporting-text")) && (
       <!-- prettier-ignore -->
-      <span class="end-text">{endText}<slot name="end-text" /><slot name="supporting-text" /></span>
+      <span class="ui-end-text">{endText}<slot name="end-text" /><slot name="supporting-text" /></span>
     )
   }
   <slot />

package/components/Textarea/Textarea.astro

@@ -54,12 +54,12 @@ const fieldName = name || currentFieldName
 
 <label
   class:list={[
-    "textarea",
+    "ui-textarea",
     {
-      "auto-fit": autoFit,
-      filled,
-      spread,
-      small,
+      "ui-auto-fit": autoFit,
+      "ui-filled": filled,
+      "ui-spread": spread,
+      "ui-small": small,
     },
     className,
   ]}
@@ -69,17 +69,17 @@ const fieldName = name || currentFieldName
 {
   (label || Astro.slots.has("label")) && (
       <!-- prettier-ignore -->
-      <span class="label">{label}<slot name="label" /></span>
+      <span class="ui-label">{label}<slot name="label" /></span>
     )
   }
 
 {
   (description || Astro.slots.has("description")) && (
       <!-- prettier-ignore -->
-      <span class="start-text">{description}<slot name="description" /></span>
+      <span class="ui-start-text">{description}<slot name="description" /></span>
     )
   }
-  <span class="field">
+  <span class="ui-field">
     <textarea
       cols={cols}
       disabled={disabled}
@@ -91,15 +91,15 @@ const fieldName = name || currentFieldName
       required={required}
       rows={rows}
       value={value}></textarea>
-    {Astro.slots.has("prefix") && <span class="prefix"><slot name="prefix" /></span>}
-    {Astro.slots.has("suffix") && <span class="suffix"><slot name="suffix" /></span>}
-    {Astro.slots.has("header") && <span class="header"><slot name="header" /></span>}
-    {Astro.slots.has("footer") && <span class="footer"><slot name="footer" /></span>}
+    {Astro.slots.has("prefix") && <span class="ui-prefix"><slot name="prefix" /></span>}
+    {Astro.slots.has("suffix") && <span class="ui-suffix"><slot name="suffix" /></span>}
+    {Astro.slots.has("header") && <span class="ui-header"><slot name="header" /></span>}
+    {Astro.slots.has("footer") && <span class="ui-footer"><slot name="footer" /></span>}
   </span>
     {
       (endText || Astro.slots.has("end-text") || Astro.slots.has("supporting-text")) && (
       <!-- prettier-ignore -->
-      <span class="end-text">{endText}<slot name="end-text" /><slot name="supporting-text" /></span>
+      <span class="ui-end-text">{endText}<slot name="end-text" /><slot name="supporting-text" /></span>
     )
   }
   <slot />

package/components/Toast/Toast.astro

@@ -6,15 +6,15 @@ export const title = "Toast"
 ></output>
 
 <template id="toast-template">
-  <div class="toast" role="alert">
-    <span class="icon" data-toast-icon></span>
-    <div class="content">
-      <div class="title" data-toast-title></div>
-      <div class="description" data-toast-description></div>
+  <div class="ui-toast" role="alert">
+    <span class="ui-icon" data-toast-icon></span>
+    <div class="ui-content">
+      <div class="ui-title" data-toast-title></div>
+      <div class="ui-description" data-toast-description></div>
     </div>
     <button
       aria-label="Close"
-      class="close-button"
+      class="ui-close-button"
       data-toast-close
       type="button"
     >

package/components/ToggleButton/ToggleButton.astro

@@ -33,9 +33,9 @@ const id = rest.id || $id("toggle")
 
 <label
   class:list={[
-    "toggle-button",
-    { selected: pressed, disabled },
-    size,
+    "ui-toggle-button",
+    { "ui-disabled": disabled },
+    size && `ui-${size}`,
     className,
   ]}
 >

package/components/ToggleGroup/ToggleGroup.astro

@@ -37,9 +37,9 @@ Astro.locals.currentToggleGroupType = originalType
 
 <div
   class:list={[
-    "toggle-group",
-    size !== "default" && size,
-    orientation,
+    "ui-toggle-group",
+    size !== "default" && size && `ui-${size}`,
+    orientation && `ui-${orientation}`,
     className,
   ]}
   role={selection === "single" ? "radiogroup" : "group"}

package/components/Tooltip/Tooltip.astro

@@ -17,7 +17,7 @@ const { alignment, arrow, class: className, id, label, ...rest } = Astro.props
 
 <Anchor
   alignment={alignment}
-  class:list={["tooltip", { "with-arrow": arrow }, className]}
+  class:list={["ui-tooltip", { "ui-with-arrow": arrow }, className]}
   id={id}
   trigger="hover"
   {...rest}

package/core/utils.css

@@ -4,7 +4,7 @@
 Screen-reader only
 When you visibly want to hide an element but make it accessible for screen readers.
 */
-  .sr-only {
+  .ui-sr-only {
     block-size: 1px;
     clip-path: inset(50%);
     inline-size: 1px;
@@ -15,17 +15,17 @@ When you visibly want to hide an element but make it accessible for screen reade
 
   /*
 Scroll-lock
-Add `.scroll-lock` to any element that uses the [open] attribute (native <dialog>,
+Add `.ui-scroll-lock` to any element that uses the [open] attribute (native <dialog>,
 <details>, or any custom element). When that element is open, the page is locked.
 */
-  html:has(.scroll-lock[open]) {
+  html:has(.ui-scroll-lock[open]) {
     overflow: clip;
     overscroll-behavior: contain;
     scrollbar-gutter: stable;
   }
 
   /* Hover and active effect for checkbox, radio and icon buttons */
-  :where(.checkbox input, .radio input, .icon-button) {
+  :where(.ui-checkbox input, .ui-radio input, .ui-icon-button) {
     --isLTR: 1;
     --isRTL: -1;
 

package/css/components/accordion.css

@@ -1,5 +1,5 @@
 @layer components.extended {
-  :where(details.accordion) {
+  :where(details.ui-accordion) {
     --_actions-gap: var(--size-1);
     --_actions-margin-block-start: var(--size-3);
     --_actions-padding-block-end: var(--size-1);
@@ -26,14 +26,14 @@
     margin-inline: var(--_margin-inline);
     transition: all var(--_transition) ease-out;
 
-    &.elevated {
+    &.ui-elevated {
       --_bg-color: var(--surface-elevated);
       --_margin-inline: 0;
       --_padding-inline: var(--size-3);
       --_shadow: var(--shadow-3);
     }
 
-    &.outlined {
+    &.ui-outlined {
       --_bg-color: var(--surface-default);
       --_border-color: var(--border-color);
       --_border-width: 1px;
@@ -41,7 +41,7 @@
       --_padding-inline: var(--size-3);
     }
 
-    &.tonal {
+    &.ui-tonal {
       --_bg-color: var(--surface-tonal);
       --_margin-inline: 0;
       --_padding-inline: var(--size-3);
@@ -98,13 +98,13 @@
       rotate: 180deg;
     }
 
-    &>.content {
+    &>.ui-content {
       margin-block-start: 0;
       padding-block: var(--_content-padding-block);
       padding-inline: var(--_content-padding-inline);
     }
 
-    &>.actions {
+    &>.ui-actions {
       display: flex;
       gap: var(--_actions-gap);
       justify-content: end;
@@ -115,7 +115,7 @@
   }
 
   /* Accordion group  */
-  :where(.card[role="group"]:has(details.accordion)) {
+  :where(.ui-card[role="group"]:has(details.ui-accordion)) {
     --_group-radius: var(--border-radius);
     --_gutter-color: var(--border-color);
     --_item-padding-inline: var(--size-3);
@@ -123,18 +123,18 @@
 
     display: block;
 
-    &.card {
-      &:not(.tonal, .outlined, .elevated) {
+    &.ui-card {
+      &:not(.ui-tonal, .ui-outlined, .ui-elevated) {
         --_item-summary-padding-inline: 0;
       }
     }
 
-    &>.content {
+    &>.ui-content {
       margin-block: 0;
       padding: 0;
     }
 
-    &>details.accordion {
+    &>details.ui-accordion {
       --_border-color: transparent;
       --_border-width: 0;
       --_margin-inline: 0;