@tapestry-ui/tabs 0.1.0 → 0.2.0

package/dist/tabs.js

@@ -56,10 +56,10 @@ export function Tabs(props) {
         }
     };
     const selected = props.items[selectedIndex];
-    return (_jsxs("div", { id: base, class: cx('tui-tabs', props.class), "data-part": "root", children: [_jsx("div", { ref: listRef, class: cx('tui-tabs-list', props.listClass), "data-part": "list", role: "tablist", "aria-label": props.label, children: props.items.map((item, index) => {
+    return (_jsxs("div", { id: base, class: cx('tui-tabs', props.class), "data-part": "root", children: [_jsx("div", { ref: listRef, class: cx('tui-tabs__list', props.listClass), "data-part": "list", role: "tablist", "aria-label": props.label, children: props.items.map((item, index) => {
                     const isSelected = index === selectedIndex;
-                    return (_jsx("button", { type: "button", role: "tab", "data-part": "tab", "data-state": isSelected ? 'selected' : 'idle', id: `${base}-tab-${index}`, class: cx('tui-tabs-tab', props.tabClass), "aria-selected": isSelected, "aria-controls": `${base}-panel-${index}`, tabIndex: isSelected ? 0 : -1, disabled: item.disabled, onClick: () => select(index), onKeyDown: (event) => handleKey(event, index), children: item.label }, ids[index]));
-                }) }), _jsx("div", { role: "tabpanel", "data-part": "panel", id: `${base}-panel-${selectedIndex}`, class: cx('tui-tabs-panel', props.panelClass), "aria-labelledby": `${base}-tab-${selectedIndex}`, tabIndex: 0, children: selected?.content })] }));
+                    return (_jsx("button", { type: "button", role: "tab", "data-part": "tab", "data-state": isSelected ? 'selected' : 'idle', id: `${base}-tab-${index}`, class: cx('tui-tabs__tab', props.tabClass), "aria-selected": isSelected, "aria-controls": `${base}-panel-${index}`, tabIndex: isSelected ? 0 : -1, disabled: item.disabled, onClick: () => select(index), onKeyDown: (event) => handleKey(event, index), children: item.label }, ids[index]));
+                }) }), _jsx("div", { role: "tabpanel", "data-part": "panel", id: `${base}-panel-${selectedIndex}`, class: cx('tui-tabs__panel', props.panelClass), "aria-labelledby": `${base}-tab-${selectedIndex}`, tabIndex: 0, children: selected?.content })] }));
 }
 function cx(...parts) {
     return parts.filter(Boolean).join(' ');

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tapestry-ui/tabs",
-  "version": "0.1.0",
-  "description": "A WCAG 2.1 AA tab set for Preact — roving tabindex, arrow-key navigation, headless behavior, skin via CSS. Forged inside a woven-tapestry game; ships with its container contract, not just its markup.",
+  "version": "0.2.0",
+  "description": "A WCAG 2.1 AA tab set for Preact \u2014 roving tabindex, arrow-key navigation, headless behavior, skin via CSS. Forged inside a woven-tapestry game; ships with its container contract, not just its markup.",
   "license": "MIT",
   "author": "Brandon Minton",
   "type": "module",
@@ -15,6 +15,9 @@
     },
     "./styles.css": "./styles.css"
   },
+  "publishConfig": {
+    "access": "public"
+  },
   "files": [
     "dist",
     "styles.css",

package/styles.css

@@ -1,12 +1,12 @@
 /* @tapestry-ui/tabs — STRUCTURAL styles only. The skin is yours:
    override the custom properties, or ignore this file entirely and
    style [data-part] hooks from scratch. Nothing here picks a color. */
-.tui-tabs-list {
+.tui-tabs__list {
   display: flex;
   gap: var(--tui-tabs-gap, 0.5em);
   flex-wrap: wrap;
 }
-.tui-tabs-tab {
+.tui-tabs__tab {
   font: inherit;
   color: inherit;
   background: none;
@@ -14,9 +14,9 @@
   cursor: pointer;
   padding: var(--tui-tabs-tab-pad, 0.4em 0.8em);
 }
-.tui-tabs-tab:disabled { cursor: default; opacity: 0.5; }
-.tui-tabs-tab:focus-visible,
-.tui-tabs-panel:focus-visible {
+.tui-tabs__tab:disabled { cursor: default; opacity: 0.5; }
+.tui-tabs__tab:focus-visible,
+.tui-tabs__panel:focus-visible {
   outline: var(--tui-tabs-focus, 2px solid currentColor);
   outline-offset: 2px;
 }