ui-foundations 0.4.1 → 0.7.0

package/LICENSE

@@ -0,0 +1,73 @@
+# PolyForm Noncommercial License 1.0.0
+
+<https://polyformproject.org/licenses/noncommercial/1.0.0>
+
+Required Notice: Copyright Thomas Bielich (https://konsumkit.com)
+
+## Acceptance
+
+In order to get any license under these terms, you must agree to them as both strict obligations and conditions to all your licenses.
+
+## Copyright License
+
+The licensor grants you a copyright license for the software to do everything you might do with the software that would otherwise infringe the licensor's copyright in it for any permitted purpose. However, you may only distribute the software according to [Distribution License](#distribution-license) and make changes or new works based on the software according to [Changes and New Works License](#changes-and-new-works-license).
+
+## Distribution License
+
+The licensor grants you an additional copyright license to distribute copies of the software. Your license to distribute covers distributing the software with changes and new works permitted by [Changes and New Works License](#changes-and-new-works-license).
+
+## Notices
+
+You must ensure that anyone who gets a copy of any part of the software from you also gets a copy of these terms or the URL for them above, as well as copies of any plain-text lines beginning with `Required Notice:` that the licensor provided with the software.
+
+## Changes and New Works License
+
+The licensor grants you an additional copyright license to make changes and new works based on the software for any permitted purpose.
+
+## Patent License
+
+The licensor grants you a patent license for the software that covers patent claims the licensor can license, or becomes able to license, that you would infringe by using the software.
+
+## Noncommercial Purposes
+
+Any noncommercial purpose is a permitted purpose.
+
+## Personal Uses
+
+Personal use for research, experiment, and testing for the benefit of public knowledge, personal study, private entertainment, hobby projects, amateur pursuits, or religious observance, without any anticipated commercial application, is use for a permitted purpose.
+
+## Noncommercial Organizations
+
+Use by any charitable organization, educational institution, public research organization, public safety or health organization, environmental protection organization, or government institution is use for a permitted purpose regardless of the source of funding or obligations resulting from the funding.
+
+## Fair Use
+
+You may have "fair use" rights for the software under the law. These terms do not limit them.
+
+## No Other Rights
+
+These terms do not allow you to sublicense or transfer any of your licenses to anyone else, or prevent the licensor from granting licenses to anyone else. These terms do not imply any other licenses.
+
+## Patent Defense
+
+If you make any written claim that the software infringes or contributes to infringement of any patent, your patent license for the software granted under these terms ends immediately. If your company makes such a claim, your patent license ends immediately for work on behalf of your company.
+
+## Violations
+
+The first time you are notified in writing that you have violated any of these terms, or done anything with the software not covered by your licenses, your licenses can nonetheless continue if you come into full compliance with these terms, and take practical steps to correct past violations, within 32 days of receiving notice. Otherwise, all your licenses end immediately.
+
+## No Liability
+
+***As far as the law allows, the software comes as is, without any warranty or condition, and the licensor will not be liable to you for any damages arising out of these terms or the use or nature of the software, under any kind of legal claim.***
+
+## Definitions
+
+The **licensor** is the individual or entity offering these terms, and the **software** is the software the licensor makes available under these terms.
+
+**You** refers to the individual or entity agreeing to these terms.
+
+**Your company** is any legal entity, sole proprietorship, or other kind of organization that you work for, plus all organizations that have control over, are under the control of, or are under common control with that organization. **Control** means ownership of substantially all the assets of an entity, or the power to direct its management and policies by vote, contract, or otherwise. Control can be direct or indirect.
+
+**Your licenses** are all the licenses granted to you for the software under these terms.
+
+**Use** means anything you do with the software requiring one of your licenses.

package/README.md

@@ -68,8 +68,9 @@ Components reference only Semantic or Core. Never raw values.
 ### Component Integration
 
 Every component ships with:
-CSS pattern, React wrapper, Nunjucks macro, playground page, docs page,
-and Code Connect mapping.
+CSS pattern, Nunjucks macro, playground page, docs page,
+and Code Connect mapping. React wrappers are available as an optional
+convenience layer but are not required — the CSS classes work in any framework.
 
 All surfaces must be present for the component to work predictably across
 docs, playgrounds, and consumer apps.
@@ -108,15 +109,33 @@ npm install ui-foundations
 
 ### Import
 
+```css
+@import "ui-foundations/core.css";
+@import "ui-foundations/ui.css";
+```
+
+### Use Components (plain HTML)
+
+```html
+<button class="button">Label</button>
+<button class="button outline">Outline</button>
+<input class="input" type="text" />
+```
+
+### Optional: React Wrappers
+
 ```js
-import "ui-foundations/core.css";
-import "ui-foundations/ui.css";
+import { Button } from "ui-foundations/react/button";
 ```
 
+The React wrappers are thin convenience layers that apply CSS classes and
+add dev-mode accessibility warnings. They contain no framework-specific
+logic — the same result is achievable with plain HTML + CSS classes.
+
 ### 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,10 +147,11 @@ 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, Divider, TextArea, Avatar, Accordion, Tabs, Tooltip
 
-Each component uses its own token layer and supports theming out of the box.
+Each component uses semantic tokens (or its own token layer for complex variants)
+and supports theming out of the box.
 
 ---
 
@@ -201,10 +221,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
 {
@@ -222,6 +243,15 @@ Figma integration via Model Context Protocol:
 - Validate before commit: `npm run ci:check`
 - Work on feature branches
 
+### Adding a New Component
+
+Load the `#component-creation` steering file for the full 10-phase workflow.
+Key steps: semantic HTML first, then Figma tokens (bind variables, never hardcode),
+CSS pattern, Nunjucks macro, React wrapper, docs page, playground, Code Connect.
+
+See `.kiro/steering/workflows/component-creation.md` for details and
+`.kiro/steering/figma/figma-components.md` for Figma-specific rules.
+
 ---
 
 ## Release
@@ -236,8 +266,14 @@ npm run release:publish
 
 ## Tech Stack
 
-Vanilla CSS (Custom Properties, `@layer`) · Node.js · Eleventy · React (optional wrappers) · Nunjucks macros · Figma MCP
+Vanilla CSS (Custom Properties, `@layer`) · Node.js · Eleventy · Nunjucks macros · Figma MCP · React (optional wrappers)
+
+---
+
+## Roadmap
+
+- **Web Components** — replace React wrappers with framework-agnostic custom elements (light DOM, no shadow DOM) so the library is truly platform-independent.
 
 ---
 
-Designed for consistency, built for scale, ready for agents.
+PolyForm Noncommercial License 1.0.0

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,97 @@
   <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 %}
+
+{% macro form(borderless=false, className='') -%}
+{%- set classes = "form" -%}
+{%- if borderless -%}{%- set classes = classes + " borderless" -%}{%- endif -%}
+{%- if className -%}{%- set classes = classes + " " + className -%}{%- endif -%}
+<form class="{{ classes }}" novalidate>{{ caller() }}</form>
+{%- endmacro %}
+
+{% macro formGroup(title='', className='') -%}
+{%- set classes = "form-group" -%}
+{%- if className -%}{%- set classes = classes + " " + className -%}{%- endif -%}
+<fieldset class="{{ classes }}">
+  {%- if title %}<legend class="form-group__title">{{ title }}</legend>{% endif -%}
+  {{ caller() }}
+</fieldset>
+{%- endmacro %}
+
+{% macro formField(labelPosition='top', invalid=false, className='') -%}
+{%- set classes = "form-field" -%}
+{%- if invalid -%}{%- set classes = classes + " is-invalid" -%}{%- endif -%}
+{%- if className -%}{%- set classes = classes + " " + className -%}{%- endif -%}
+<div class="{{ classes }}"{% if labelPosition == "side" %} data-label-position="side"{% endif %}>{{ caller() }}</div>
+{%- endmacro %}
+
+{% macro formHelper(text='') -%}
+<p class="form-field__helper">{{ text }}</p>
+{%- endmacro %}
+
+{% macro formActions(align='end', className='') -%}
+{%- set classes = "form-actions" -%}
+{%- if className -%}{%- set classes = classes + " " + className -%}{%- endif -%}
+<div class="{{ classes }}"{% if align != "end" %} data-align="{{ align }}"{% endif %}>{{ caller() }}</div>
+{%- endmacro %}