ui-foundations 0.4.1 → 0.6.0

package/README.md

@@ -116,7 +116,7 @@ import "ui-foundations/ui.css";
 ### Apply Theming
 
 ```js
-document.documentElement.dataset.brand = "a";     // "a" | "b"
+document.documentElement.dataset.brand = "a";     // "a" | "b" | "c"
 document.documentElement.dataset.mode  = "light";  // "light" | "dark"
 ```
 
@@ -128,8 +128,8 @@ to see it in action.
 
 ## Components
 
-Label, Button (solid / outline / ghost), ButtonGroup, Input, Icon, Checkbox,
-Radio, RadioGroup, Switch, Slider, Link
+Label, Button (solid / outline / ghost), ButtonGroup, Badge, Input, Icon, Checkbox,
+Radio, Switch, Link
 
 Each component uses its own token layer and supports theming out of the box.
 
@@ -201,10 +201,11 @@ npm run rules:validate  # rule pipeline traceability
 
 ## MCP Integration
 
-Figma integration via Model Context Protocol:
+Figma integration uses the Model Context Protocol. Token exports live in
+`figma/exports/` and are processed by `npm run tokens:generate`.
 
-- `figma-developer-mcp` — REST API read access (requires `FIGMA_TOKEN` in `.env`)
-- Figma Desktop MCP — local server via Figma Desktop app
+- **Figma Desktop MCP** — local server via the Figma Desktop app (primary path)
+- **figma-developer-mcp** — REST API read access (requires `FIGMA_TOKEN` in `.env`)
 
 ```json
 {
@@ -240,4 +241,4 @@ Vanilla CSS (Custom Properties, `@layer`) · Node.js · Eleventy · React (optio
 
 ---
 
-Designed for consistency, built for scale, ready for agents.
+MIT License

package/dist/core/index.css

@@ -9,4 +9,5 @@
 @import url("../tokens/css/appearance-modes.tokens.mode-light.css") layer(tokens);
 @import url("../tokens/css/themes-brands.tokens.brand-a.css") layer(tokens);
 @import url("../tokens/css/themes-brands.tokens.brand-b.css") layer(tokens);
+@import url("../tokens/css/themes-brands.tokens.brand-c.css") layer(tokens);
 @import url("./themes/mode.css") layer(themes);

package/dist/macros/ui.njk

@@ -140,3 +140,64 @@
   <span class="badge__text">{{ text }}</span>
 </span>
 {%- endmacro %}
+
+{% macro divider(orientation='horizontal', variant='', className='') -%}
+{%- set classes = "divider" -%}
+{%- if variant -%}{%- set classes = classes + " " + variant -%}{%- endif -%}
+{%- if className -%}{%- set classes = classes + " " + className -%}{%- endif -%}
+<hr class="{{ classes }}"{% if orientation == "vertical" %} aria-orientation="vertical"{% endif %} />
+{%- endmacro %}
+
+{% macro textarea(placeholder='', value='', disabled=false, readonly=false, rows='', state='default', className='') -%}
+{%- set classes = "textarea" -%}
+{%- if state == "hover" -%}{%- set classes = classes + " is-hover" -%}{%- endif -%}
+{%- if state == "focus" -%}{%- set classes = classes + " is-focus-visible" -%}{%- endif -%}
+{%- if state == "disabled" or disabled -%}{%- set classes = classes + " is-disabled" -%}{%- endif -%}
+{%- if className -%}{%- set classes = classes + " " + className -%}{%- endif -%}
+<textarea class="{{ classes }}"{% if placeholder %} placeholder="{{ placeholder }}"{% endif %}{% if rows %} rows="{{ rows }}"{% endif %}{% if readonly %} readonly{% endif %}{% if disabled or state == "disabled" %} disabled{% endif %}>{{ value }}</textarea>
+{%- endmacro %}
+
+{% macro avatar(src='', alt='', initials='', size='', className='') -%}
+{%- set classes = "avatar" -%}
+{%- if size and size != "md" -%}{%- set classes = classes + " " + size -%}{%- endif -%}
+{%- if className -%}{%- set classes = classes + " " + className -%}{%- endif -%}
+<span class="{{ classes }}" role="img" aria-label="{{ alt or initials }}">
+  {%- if src -%}<img src="{{ src }}" alt="{{ alt }}" />{%- else -%}<span class="avatar__initials">{{ initials }}</span>{%- endif -%}
+</span>
+{%- endmacro %}
+
+{% macro accordion(className='') -%}
+{%- set classes = "accordion" -%}
+{%- if className -%}{%- set classes = classes + " " + className -%}{%- endif -%}
+<div class="{{ classes }}">{{ caller() }}</div>
+{%- endmacro %}
+
+{% macro accordionItem(title='', open=false, disabled=false) -%}
+{%- set classes = "accordion-item" -%}
+{%- if disabled -%}{%- set classes = classes + " is-disabled" -%}{%- endif -%}
+<details class="{{ classes }}"{% if open %} open{% endif %}>
+  <summary>{{ title }}</summary>
+  <div class="accordion-item__content">{{ caller() }}</div>
+</details>
+{%- endmacro %}
+
+{% macro tabList(orientation='horizontal', ariaLabel='', className='') -%}
+{%- set classes = "tab-list" -%}
+{%- if className -%}{%- set classes = classes + " " + className -%}{%- endif -%}
+<div class="{{ classes }}" role="tablist" aria-orientation="{{ orientation }}"{% if ariaLabel %} aria-label="{{ ariaLabel }}"{% endif %}>{{ caller() }}</div>
+{%- endmacro %}
+
+{% macro tab(label='', selected=false, disabled=false, controls='') -%}
+{%- set classes = "tab" -%}
+<button class="{{ classes }}" role="tab" type="button" aria-selected="{{ "true" if selected else "false" }}"{% if controls %} aria-controls="{{ controls }}"{% endif %}{% if disabled %} disabled{% endif %} tabindex="{{ "0" if selected else "-1" }}">{{ label }}</button>
+{%- endmacro %}
+
+{% macro tabPanel(id='', hidden=false) -%}
+<div class="tab-panel" role="tabpanel"{% if id %} id="{{ id }}"{% endif %}{% if hidden %} hidden{% endif %} tabindex="0">{{ caller() }}</div>
+{%- endmacro %}
+
+{% macro tooltip(text='', placement='top', className='') -%}
+{%- set classes = "tooltip-trigger" -%}
+{%- if className -%}{%- set classes = classes + " " + className -%}{%- endif -%}
+<span class="{{ classes }}">{{ caller() }}<span class="tooltip" role="tooltip" data-placement="{{ placement }}">{{ text }}</span></span>
+{%- endmacro %}