@wovenui/components 0.0.0-stage → 1.0.0

package/package.json

@@ -1,6 +1,270 @@
 {
   "name": "@wovenui/components",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "1.0.0",
+  "description": "WovenUI Components (UI kit): components built on @wovenui/core tokens. CSS, plus a small optional script.",
+  "author": {
+    "name": "AALA IT Solutions",
+    "url": "https://aalasolutions.com"
+  },
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
+  "homepage": "https://wovenui.com/components/",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/WovenUI/components.git"
+  },
+  "bugs": {
+    "url": "https://github.com/WovenUI/components/issues"
+  },
+  "main": "dist/wovenui-kit.min.css",
+  "style": "dist/wovenui-kit.min.css",
+  "sass": "src/index.scss",
+  "keywords": [
+    "wovenui",
+    "css",
+    "html",
+    "components",
+    "ui-components",
+    "ui-kit",
+    "design-system",
+    "css-components",
+    "sass",
+    "accessible",
+    "native-html",
+    "dialog",
+    "popover",
+    "rtl",
+    "dark-mode",
+    "themes",
+    "css-only-components",
+    "css-framework",
+    "ui-library",
+    "component-library",
+    "html-css",
+    "bootstrap-alternative",
+    "modal",
+    "dropdown",
+    "tabs",
+    "toast",
+    "accordion",
+    "data-table",
+    "anchor-positioning",
+    "invoker-commands",
+    "logical-properties",
+    "wovenui-core"
+  ],
+  "files": [
+    "dist",
+    "src"
+  ],
+  "exports": {
+    ".": {
+      "sass": "./src/index.scss",
+      "style": "./dist/wovenui-kit.min.css",
+      "default": "./dist/wovenui-kit.min.css"
+    },
+    "./scss": "./src/index.scss",
+    "./css": "./dist/wovenui-kit.css",
+    "./min.css": "./dist/wovenui-kit.min.css",
+    "./button": {
+      "sass": "./src/entries/button.scss"
+    },
+    "./btn-group": {
+      "sass": "./src/entries/btn-group.scss"
+    },
+    "./badge": {
+      "sass": "./src/entries/badge.scss"
+    },
+    "./tag": {
+      "sass": "./src/entries/tag.scss"
+    },
+    "./dot": {
+      "sass": "./src/entries/dot.scss"
+    },
+    "./divider": {
+      "sass": "./src/entries/divider.scss"
+    },
+    "./spinner": {
+      "sass": "./src/entries/spinner.scss"
+    },
+    "./avatar": {
+      "sass": "./src/entries/avatar.scss"
+    },
+    "./avatar-group": {
+      "sass": "./src/entries/avatar-group.scss"
+    },
+    "./card": {
+      "sass": "./src/entries/card.scss"
+    },
+    "./panel": {
+      "sass": "./src/entries/panel.scss"
+    },
+    "./alert": {
+      "sass": "./src/entries/alert.scss"
+    },
+    "./empty-state": {
+      "sass": "./src/entries/empty-state.scss"
+    },
+    "./stat": {
+      "sass": "./src/entries/stat.scss"
+    },
+    "./desc-list": {
+      "sass": "./src/entries/desc-list.scss"
+    },
+    "./info-row": {
+      "sass": "./src/entries/info-row.scss"
+    },
+    "./list": {
+      "sass": "./src/entries/list.scss"
+    },
+    "./timeline": {
+      "sass": "./src/entries/timeline.scss"
+    },
+    "./title": {
+      "sass": "./src/entries/title.scss"
+    },
+    "./text": {
+      "sass": "./src/entries/text.scss"
+    },
+    "./code-block": {
+      "sass": "./src/entries/code-block.scss"
+    },
+    "./breadcrumb": {
+      "sass": "./src/entries/breadcrumb.scss"
+    },
+    "./pagination": {
+      "sass": "./src/entries/pagination.scss"
+    },
+    "./page-header": {
+      "sass": "./src/entries/page-header.scss"
+    },
+    "./toolbar": {
+      "sass": "./src/entries/toolbar.scss"
+    },
+    "./topbar": {
+      "sass": "./src/entries/topbar.scss"
+    },
+    "./sidebar": {
+      "sass": "./src/entries/sidebar.scss"
+    },
+    "./table": {
+      "sass": "./src/entries/table.scss"
+    },
+    "./progress": {
+      "sass": "./src/entries/progress.scss"
+    },
+    "./progress-circle": {
+      "sass": "./src/entries/progress-circle.scss"
+    },
+    "./skeleton": {
+      "sass": "./src/entries/skeleton.scss"
+    },
+    "./field": {
+      "sass": "./src/entries/field.scss"
+    },
+    "./field-group": {
+      "sass": "./src/entries/field-group.scss"
+    },
+    "./field-message": {
+      "sass": "./src/entries/field-message.scss"
+    },
+    "./form-actions": {
+      "sass": "./src/entries/form-actions.scss"
+    },
+    "./input": {
+      "sass": "./src/entries/input.scss"
+    },
+    "./input-group": {
+      "sass": "./src/entries/input-group.scss"
+    },
+    "./textarea": {
+      "sass": "./src/entries/textarea.scss"
+    },
+    "./select": {
+      "sass": "./src/entries/select.scss"
+    },
+    "./checkbox": {
+      "sass": "./src/entries/checkbox.scss"
+    },
+    "./radio": {
+      "sass": "./src/entries/radio.scss"
+    },
+    "./toggle": {
+      "sass": "./src/entries/toggle.scss"
+    },
+    "./segmented": {
+      "sass": "./src/entries/segmented.scss"
+    },
+    "./accordion": {
+      "sass": "./src/entries/accordion.scss"
+    },
+    "./modal": {
+      "sass": "./src/entries/modal.scss"
+    },
+    "./confirm-modal": {
+      "sass": "./src/entries/confirm-modal.scss"
+    },
+    "./drawer": {
+      "sass": "./src/entries/drawer.scss"
+    },
+    "./dropdown": {
+      "sass": "./src/entries/dropdown.scss"
+    },
+    "./popover": {
+      "sass": "./src/entries/popover.scss"
+    },
+    "./tabs": {
+      "sass": "./src/entries/tabs.scss"
+    },
+    "./toast": {
+      "sass": "./src/entries/toast.scss"
+    },
+    "./autocomplete": {
+      "sass": "./src/entries/autocomplete.scss"
+    },
+    "./data-table": {
+      "sass": "./src/entries/data-table.scss"
+    },
+    "./js": "./dist/wovenui-kit.js",
+    "./components.json": "./dist/components.json",
+    "./llms-full.txt": "./dist/llms-full.txt",
+    "./package.json": "./package.json"
+  },
+  "scripts": {
+    "lint": "stylelint \"src/**/*.scss\"",
+    "format": "prettier --write \"src/**/*.scss\" \"src/js/**/*.js\" \"scripts/**/*.mjs\"",
+    "format:check": "prettier --check \"src/**/*.scss\" \"src/js/**/*.js\" \"scripts/**/*.mjs\"",
+    "build:scss": "node --conditions=sass scripts/build-scss.mjs src/index.scss dist/wovenui-kit.css",
+    "build:minify": "postcss dist/wovenui-kit.css -o dist/wovenui-kit.min.css --use cssnano --map",
+    "build": "pnpm run build:scss && pnpm run build:minify && pnpm run build:js && pnpm run build:docs",
+    "dev": "node --conditions=sass --watch-path=src scripts/build-scss.mjs src/index.scss dist/wovenui-kit.css",
+    "check": "node scripts/check-modifiers.mjs",
+    "test": "pnpm run build && node --conditions=sass test/compile.mjs && node --conditions=sass test/switches.mjs && node --conditions=sass test/entries.mjs && node --conditions=sass test/caret.mjs && node test/modifiers.mjs && node test/size.mjs && node test/js.mjs && node --conditions=sass test/docs.mjs",
+    "build:js": "node scripts/build-js.mjs",
+    "build:docs": "node scripts/build-docs.mjs"
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not dead"
+  ],
+  "devDependencies": {
+    "@wovenui/core": "^2.2.2",
+    "cssnano": "^8.0.10",
+    "postcss": "^8.5.28",
+    "postcss-cli": "^11.0.1",
+    "prettier": "^3.9.6",
+    "sass": "^1.103.1",
+    "stylelint": "^17.14.1",
+    "stylelint-config-standard-scss": "^17.0.0"
+  },
+  "peerDependencies": {
+    "@wovenui/core": "^2.2.2",
+    "sass": ">=1.79.0 <2"
+  },
+  "engines": {
+    "node": ">=14.0.0"
+  }
+}

package/src/_close.scss

@@ -0,0 +1,45 @@
+// Close button shared by modal, drawer and toast: a cross drawn from two bars.
+// Outputs nothing on its own; each component includes it in its close part.
+@use "@wovenui/core/mixins" as woven;
+
+@mixin button {
+    display: grid;
+    flex: none;
+    place-items: center;
+    inline-size: woven.token(control-height-sm);
+    block-size: woven.token(control-height-sm);
+    padding: 0;
+    border: 0;
+    border-radius: woven.token(radius-sm);
+    background: transparent;
+    color: woven.token(text-muted);
+    cursor: pointer;
+    transition-property: background-color, color;
+    transition-duration: woven.token(duration-150);
+    transition-timing-function: woven.token(ease-out);
+
+    &::before,
+    &::after {
+        content: "";
+        grid-area: 1 / 1;
+        inline-size: 1rem;
+        block-size: woven.token(border-width-2);
+        border-radius: woven.token(radius-full);
+        background: currentcolor;
+        rotate: 45deg;
+    }
+
+    &::after {
+        rotate: -45deg;
+    }
+
+    &:hover {
+        background: woven.token(bg-hover);
+        color: woven.token(text-regular);
+    }
+
+    &:focus-visible {
+        outline: woven.token(border-focus-width) solid woven.token(border-focus);
+        outline-offset: woven.token(border-focus-offset);
+    }
+}

package/src/_helpers.scss

@@ -0,0 +1,11 @@
+// Kit-wide helpers, emitted with every component
+
+// <svg class="wu-mirror">: flips an app's directional icon (back, next, arrow) in right to left.
+// Works on svg, img and icon-font elements; inline elements become inline-block so the flip applies.
+:where(i, span, em).wu-mirror {
+    display: inline-block;
+}
+
+.wu-mirror:dir(rtl) {
+    scale: -1 1;
+}

package/src/_kit.scss

@@ -0,0 +1,124 @@
+// Component registry and loader shared by the bundle and the per-component entries
+@use "sass:list";
+@use "sass:map";
+@use "sass:meta";
+
+// One line per component: name and the components it needs
+$registry: (
+    "button": (),
+    "btn-group": ("button"),
+    "badge": (),
+    "tag": (),
+    "dot": (),
+    "divider": (),
+    "spinner": (),
+    "avatar": (),
+    "avatar-group": ("avatar"),
+    "card": (),
+    "panel": (),
+    "alert": (),
+    "empty-state": (),
+    "stat": (),
+    "desc-list": (),
+    "info-row": (),
+    "list": (),
+    "timeline": (),
+    "title": (),
+    "text": (),
+    "code-block": (),
+    "breadcrumb": (),
+    "pagination": ("button"),
+    "page-header": (),
+    "toolbar": (),
+    "topbar": (),
+    "sidebar": (),
+    "table": (),
+    "progress": (),
+    "progress-circle": (),
+    "skeleton": (),
+    "field": (),
+    "field-group": (),
+    "field-message": (),
+    "form-actions": (),
+    "input": (),
+    "input-group": (),
+    "textarea": (),
+    "select": (),
+    "checkbox": (),
+    "radio": (),
+    "toggle": (),
+    "segmented": (),
+    "accordion": (),
+    "modal": (),
+    "confirm-modal": (
+        "modal",
+        "button",
+    ),
+    "drawer": (),
+    "dropdown": (),
+    "popover": (),
+    "tabs": (),
+    "toast": (),
+    "autocomplete": ("input"),
+    "data-table": ("table"),
+);
+
+// Names enabled after merging $overrides (name: false) over the registry, all on by default
+@function enabled($overrides, $registry: $registry) {
+    @each $name, $on in $overrides {
+        @if not map.has-key($registry, $name) {
+            @error "$components: unknown component \"#{$name}\". Known: #{map.keys($registry)}";
+        }
+        @if meta.type-of($on) != "bool" {
+            @error "$components: \"#{$name}\" takes true or false, got #{meta.inspect($on)}";
+        }
+    }
+
+    $names: ();
+    @each $name, $needs in $registry {
+        @if map.get($overrides, $name) != false {
+            $names: list.append($names, $name, comma);
+        }
+    }
+
+    @each $name in $names {
+        @each $need in map.get($registry, $name) {
+            @if not list.index($names, $need) {
+                @error "$components: \"#{$name}\" needs \"#{$need}\", but \"#{$need}\" is switched off";
+            }
+        }
+    }
+    @return $names;
+}
+
+// A component plus everything it needs, needs first
+@function with-needs($name, $registry: $registry, $names: ()) {
+    @if not map.has-key($registry, $name) {
+        @error "Unknown component \"#{$name}\". Known: #{map.keys($registry)}";
+    }
+    @each $need in map.get($registry, $name) {
+        @if not list.index($names, $need) {
+            $names: with-needs($need, $registry, $names);
+        }
+    }
+    @if not list.index($names, $name) {
+        $names: list.append($names, $name, comma);
+    }
+    @return $names;
+}
+
+// Layer order, shared values and helpers, then the components in registry order
+@mixin emit($names) {
+    @layer reset, base, components, recipes;
+
+    @layer components {
+        @include meta.load-css("shared");
+        @include meta.load-css("helpers");
+
+        @each $name in map.keys($registry) {
+            @if list.index($names, $name) {
+                @include meta.load-css("components/#{$name}");
+            }
+        }
+    }
+}

package/src/_shared.scss

@@ -0,0 +1,10 @@
+// Shared kit values, declared once as custom properties
+:root {
+    --wu-kit-ease-spring: linear(0, 0.25 7%, 0.69 17%, 0.95 26%, 1.07 35%, 1.09 42%, 1.05 52%, 1 63%, 0.99 75%, 1);
+
+    // Role marker shapes for clip-path, so meaning is not carried by color alone:
+    // check for success, triangle for warning, octagon for danger
+    --wu-kit-marker-check: polygon(12% 48%, 0 62%, 38% 96%, 100% 24%, 86% 10%, 38% 70%);
+    --wu-kit-marker-triangle: polygon(50% 4%, 100% 96%, 0 96%);
+    --wu-kit-marker-octagon: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%);
+}

package/src/components/_accordion.scss

@@ -0,0 +1,132 @@
+////
+//// @component wu-accordion
+//// Stacked disclosure panels built on native `details`, in one bordered group.
+////
+//// The same `name` on several `details` makes the group exclusive, one open at a time. Leave it out to allow several open.
+////
+//// @since 1.0.0
+//// @needs none
+//// @js none
+//// @example html
+////   <div class="wu-accordion">
+////     <details class="wu-accordion-item" name="faq" open>
+////       <summary class="wu-accordion-trigger">What is included?</summary>
+////       <div class="wu-accordion-body">Every plan includes support.</div>
+////     </details>
+////     <details class="wu-accordion-item" name="faq">
+////       <summary class="wu-accordion-trigger">Can I cancel?</summary>
+////       <div class="wu-accordion-body">Yes, at any time.</div>
+////     </details>
+////   </div>
+//// @example html
+////   <div class="wu-accordion animated">
+////     <details class="wu-accordion-item">
+////       <summary class="wu-accordion-trigger">Shipping</summary>
+////       <div class="wu-accordion-body">Orders ship in two days.</div>
+////     </details>
+////   </div>
+//// @modifier animated - The chevron turns and the panel height glides when the user allows motion; `wu-animated` on an ancestor does the same @since 1.0.0
+//// @part wu-accordion-item - A `details` element holding one trigger and one body @since 1.0.0
+//// @part wu-accordion-trigger - The `summary` that opens and closes the item, with a chevron @since 1.0.0
+//// @part wu-accordion-body - The panel content shown when the item is open @since 1.0.0
+//// @state open - The chevron points up and the body is shown @since 1.0.0
+////
+
+@use "@wovenui/core/mixins" as woven;
+
+.wu-accordion {
+    border: woven.token(border-width-1) solid woven.token(border-regular);
+    border-radius: woven.token(radius-md);
+    background: woven.token(bg-surface);
+    color: woven.token(text-regular);
+    font-size: woven.token(font-size-sm);
+    overflow: clip;
+}
+
+.wu-accordion-item + .wu-accordion-item {
+    border-block-start: woven.token(border-width-1) solid woven.token(border-regular);
+}
+
+.wu-accordion-trigger {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: woven.token(space-3);
+    min-height: woven.token(control-height-lg);
+    padding-block: woven.token(space-2);
+    padding-inline: woven.token(space-4);
+    font-weight: woven.token(font-weight-medium);
+    list-style: none;
+    cursor: pointer;
+    transition: background-color woven.token(duration-150) woven.token(ease-out);
+
+    &::-webkit-details-marker {
+        display: none;
+    }
+
+    &:hover {
+        background: woven.token(bg-hover);
+    }
+
+    // Inset ring, so the bordered group does not clip it
+    &:focus-visible {
+        outline: woven.token(border-focus-width) solid woven.token(border-focus);
+        outline-offset: calc(-1 * #{woven.token(border-focus-width)});
+    }
+
+    // Chevron drawn with two borders: down when closed, up when open
+    &::after {
+        content: "";
+        flex: none;
+        width: 0.45em;
+        height: 0.45em;
+        border-right: woven.token(border-width-2) solid currentcolor;
+        border-bottom: woven.token(border-width-2) solid currentcolor;
+        color: woven.token(text-muted);
+        translate: 0 -0.1em;
+        rotate: 45deg;
+    }
+}
+
+.wu-accordion-item[open] > .wu-accordion-trigger::after {
+    translate: 0 0.1em;
+    rotate: -135deg;
+}
+
+// Regular text: the body is what the reader opened the item for, often settings, not a secondary hint
+.wu-accordion-body {
+    padding-block: 0 woven.token(space-4);
+    padding-inline: woven.token(space-4);
+    line-height: woven.token(line-height-normal);
+}
+
+// Opt-in motion: the chevron turns and the panel height glides
+@media (prefers-reduced-motion: no-preference) {
+    .wu-accordion.animated,
+    .wu-animated .wu-accordion {
+        .wu-accordion-trigger::after {
+            transition-property: rotate, translate;
+            transition-duration: woven.token(duration-200);
+            transition-timing-function: woven.token(ease-out);
+        }
+    }
+
+    @supports (interpolate-size: allow-keywords) and selector(::details-content) {
+        .wu-accordion.animated,
+        .wu-animated .wu-accordion {
+            interpolate-size: allow-keywords;
+
+            .wu-accordion-item::details-content {
+                block-size: 0;
+                overflow: clip;
+                transition:
+                    block-size woven.token(duration-200) woven.token(ease-out),
+                    content-visibility woven.token(duration-200) allow-discrete;
+            }
+
+            .wu-accordion-item[open]::details-content {
+                block-size: auto;
+            }
+        }
+    }
+}