@sekiui/elements 0.0.13 → 0.0.15

package/README.md

@@ -1,25 +1,271 @@
-# @sekiui/elements
+# SekiUI Components
 
-**Seki UI** — short, rock-solid web components with the `seki-` prefix.
+Modern, accessible Web Components library built with Stencil.js, inspired by shadcn/ui design principles.
+
+## Features
+
+- 🎨 **Modern Design**: Clean, minimal components following shadcn/ui aesthetic
+- ♿ **Accessibility First**: WCAG 2.1 Level AA compliant
+- 🌗 **Dark Mode**: First-class dark mode support via CSS custom properties
+- 📦 **Framework Agnostic**: Works with React, Vue, Angular, or vanilla JavaScript
+- 🎯 **TypeScript**: Full TypeScript definitions included
+- 🎭 **Storybook**: Interactive component documentation
+- 🔧 **Tree-shakeable**: Import only what you need
+
+## Installation
+
+```bash
+npm install @sekiui/elements
+```
+
+## Usage
+
+### Web Components (Vanilla JS)
 
-## Quick start
 ```html
-<script type="module">
-  import "@sekiui/elements"; // registers <seki-button> and <seki-card>
+<script type="module" src="node_modules/@sekiui/components/dist/sekiui/sekiui.esm.js"></script>
+
+<seki-button variant="default">Click me</seki-button>
+```
+
+### React
+
+```jsx
+import { SekiButton } from '@sekiui/elements/react';
+
+function App() {
+  return <SekiButton variant="default">Click me</SekiButton>;
+}
+```
+
+### Vue
+
+```vue
+<template>
+  <seki-button variant="default">Click me</seki-button>
+</template>
+
+<script>
+import { defineCustomElements } from '@sekiui/elements/loader';
+defineCustomElements();
 </script>
+```
+
+## Development Setup
+
+### Prerequisites
+
+- Node.js 20.x or later
+- npm or yarn
+
+### Install Dependencies
+
+```bash
+npm install
+```
+
+### Development Server
+
+```bash
+npm start
+```
+
+### Build
+
+```bash
+npm run build
+```
+
+### Storybook
+
+```bash
+npm run storybook
+```
+
+### Version Management Tool
+
+For accurate version comparison when creating releases, install the `semver` CLI globally:
+
+```bash
+npm install -g semver
+```
+
+The `semver` CLI is used by the release helper script to validate that new versions are greater than the latest published version. Without it, the script falls back to basic string comparison, which may not correctly handle pre-release versions.
+
+**Why semver?**
+- Accurate semantic version comparison (handles 1.0.0-beta.1 vs 1.0.0 correctly)
+- Validates version ranges and constraints
+- Official npm semver library
+
+**Fallback behavior:**
+If `semver` is not installed, the release script will warn you and ask for confirmation before proceeding with basic validation.
+
+## Releasing New Versions
+
+### Automated Release Process
+
+SekiUI uses an automated npm publishing workflow that triggers when you push version tags to GitHub.
 
-<seki-card>
-  <seki-button>Click me</seki-button>
-</seki-card>
+#### Using the Release Helper Script (Recommended)
+
+The easiest way to create a new release:
+
+```bash
+npm run release
 ```
 
-## Per-component imports
-```js
-import "@sekiui/elements/button"; // defines <seki-button> only
+**What the script does:**
+1. Fetches the latest published version from npm
+2. Prompts you for the new version number
+3. Validates that the new version is greater than the latest
+4. **Rejects versions that are less than or equal to the latest**
+5. Creates a git tag with 'v' prefix (e.g., v1.0.0)
+6. Pushes the tag to GitHub
+7. Triggers the automated publish workflow
+
+**Example:**
+```bash
+$ npm run release
+
+🚀 SekiUI Release Helper
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+📡 Fetching latest version from npm registry...
+✓ Current latest version on npm: 0.1.1
+
+Minimum allowed version: 0.1.2
+
+Enter new version: 0.1.0
+❌ Error: Version 0.1.0 is not greater than current version 0.1.1
+Minimum allowed version: 0.1.2
+
+Enter new version: 0.2.0
+✓ Version 0.2.0 is valid (greater than 0.1.1)
+
+📝 Creating git tag: v0.2.0
+✓ Tag created locally
+
+🚀 Pushing tag to origin...
+
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+✅ Success! Tag v0.2.0 pushed to GitHub
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+📦 The GitHub Actions workflow will now:
+   1. Build the project
+   2. Run tests
+   3. Publish to npm as version 0.2.0
+
+🔍 Monitor progress at:
+   https://github.com/YourOrg/SekiUI/actions
+```
+
+#### Manual Tag Creation (Alternative)
+
+If you prefer to create tags manually:
+
+```bash
+# Create a tag with 'v' prefix
+git tag v1.0.0
+
+# Push the tag to GitHub
+git push origin v1.0.0
 ```
 
-## Theming
-Use CSS parts and custom properties (e.g. `part="button"`).
+**Important:** Always use the 'v' prefix (e.g., v1.0.0, not 1.0.0). The workflow only triggers on tags matching `v*.*.*`.
+
+### Versioning Guidelines
+
+Follow [Semantic Versioning](https://semver.org/):
+
+- **MAJOR** (v2.0.0): Breaking changes, removed features, changed API
+- **MINOR** (v1.1.0): New features, backward-compatible enhancements
+- **PATCH** (v1.0.1): Bug fixes, documentation updates, internal refactors
+
+**Pre-release versions:**
+- Alpha: v1.0.0-alpha.1, v1.0.0-alpha.2, ...
+- Beta: v1.0.0-beta.1, v1.0.0-beta.2, ...
+- Release Candidate: v1.0.0-rc.1, v1.0.0-rc.2, ...
+
+Pre-release versions are published with the `next` tag on npm and won't be installed by default.
+
+### What Happens After Pushing a Tag
+
+The automated GitHub Actions workflow:
+
+1. ✅ **Validates NPM_TOKEN** - Fails fast if secret is missing
+2. 📦 **Installs dependencies** - Clean install with `npm ci`
+3. 🔢 **Extracts version** - Strips 'v' prefix from tag
+4. 🔄 **Syncs package.json** - Updates version to match tag
+5. 🏗️ **Builds project** - Compiles TypeScript and generates dist/
+6. ✅ **Validates build** - Ensures dist/ folder exists
+7. 🚀 **Publishes to npm** - Uploads to npm registry
+8. 🏷️ **Applies dist-tag** - Uses `latest` for stable, `next` for pre-releases
+
+### Monitoring Workflow Status
+
+After pushing a tag:
+
+1. Go to the **Actions** tab in GitHub
+2. Find the "Publish to npm" workflow
+3. Click to view real-time logs
+4. Green checkmark = successful publish
+5. Red X = failure (check logs for details)
+
+### NPM_TOKEN Setup (First-Time Maintainers)
+
+**One-time setup required before releasing:**
+
+1. **Generate npm token:**
+   - Log in to [npmjs.com](https://npmjs.com)
+   - Go to Account → Access Tokens
+   - Click "Generate New Token"
+   - Select **Automation** token type
+   - Copy the token (shown only once!)
+
+2. **Add token to GitHub:**
+   - Go to repository Settings → Secrets and variables → Actions
+   - Click "New repository secret"
+   - Name: `NPM_TOKEN`
+   - Value: Paste your npm token
+   - Click "Add secret"
+
+3. **Verify setup:**
+   - Create a test tag (e.g., v0.1.0-test.1)
+   - Push the tag
+   - Check GitHub Actions logs
+   - If successful, delete the test version from npm
+
+### Troubleshooting
+
+**"NPM_TOKEN secret is not set"**
+- Add NPM_TOKEN to repository secrets (see setup above)
+
+**"You cannot publish over the previously published versions"**
+- You're trying to publish a version that already exists
+- Increment the version number and try again
+
+**"Build did not generate dist/ folder"**
+- Build failed due to TypeScript errors or configuration issues
+- Fix the errors and create a new tag
+
+**Tag pushed but workflow didn't run**
+- Ensure tag matches pattern `v*.*.*` (with lowercase 'v')
+- Check that workflow file exists in `.github/workflows/publish-npm.yml`
+
+**Release script rejects valid version**
+- Ensure `semver` CLI is installed: `npm install -g semver`
+- Or proceed with basic validation (less accurate for pre-releases)
+
+## Contributing
+
+1. Fork the repository
+2. Create a feature branch (`git checkout -b feature/amazing-component`)
+3. Make your changes
+4. Run tests (`npm test`)
+5. Commit your changes (`git commit -m 'feat: add amazing component'`)
+6. Push to your branch (`git push origin feature/amazing-component`)
+7. Open a Pull Request
 
 ## License
-MIT
+
+MIT © SekiUI Team

package/dist/cjs/app-globals-V2Kpy_OQ.js

@@ -0,0 +1,5 @@
+'use strict';
+
+const globalScripts = () => {};
+
+exports.globalScripts = globalScripts;

package/dist/{esm/index-3X8Wsgjr.js → cjs/index-6jIfEFyf.js}

@@ -1,11 +1,10 @@
-const NAMESPACE = 'sekiui';
-const BUILD = /* sekiui */ { hydratedSelectorName: "hydrated", lazyLoad: true, updatable: true, watchCallback: false };
+'use strict';
 
-const globalScripts = () => {};
-const globalStyles = "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n/* shadcn/ui design tokens */\n@layer base {\n  :root {\n    --background: 0 0% 100%;\n    --foreground: 222.2 84% 4.9%;\n    --card: 0 0% 100%;\n    --card-foreground: 222.2 84% 4.9%;\n    --popover: 0 0% 100%;\n    --popover-foreground: 222.2 84% 4.9%;\n    --primary: 222.2 47.4% 11.2%;\n    --primary-foreground: 210 40% 98%;\n    --secondary: 210 40% 96%;\n    --secondary-foreground: 222.2 84% 4.9%;\n    --muted: 210 40% 96%;\n    --muted-foreground: 215.4 16.3% 46.9%;\n    --accent: 210 40% 96%;\n    --accent-foreground: 222.2 84% 4.9%;\n    --destructive: 0 84.2% 60.2%;\n    --destructive-foreground: 210 40% 98%;\n    --border: 214.3 31.8% 91.4%;\n    --input: 214.3 31.8% 91.4%;\n    --ring: 222.2 84% 4.9%;\n    --radius: 0.5rem;\n  }\n\n  .dark {\n    --background: 222.2 84% 4.9%;\n    --foreground: 210 40% 98%;\n    --card: 222.2 84% 4.9%;\n    --card-foreground: 210 40% 98%;\n    --popover: 222.2 84% 4.9%;\n    --popover-foreground: 210 40% 98%;\n    --primary: 210 40% 98%;\n    --primary-foreground: 222.2 47.4% 11.2%;\n    --secondary: 217.2 32.6% 17.5%;\n    --secondary-foreground: 210 40% 98%;\n    --muted: 217.2 32.6% 17.5%;\n    --muted-foreground: 215 20.2% 65.1%;\n    --accent: 217.2 32.6% 17.5%;\n    --accent-foreground: 210 40% 98%;\n    --destructive: 0 62.8% 30.6%;\n    --destructive-foreground: 210 40% 98%;\n    --border: 217.2 32.6% 17.5%;\n    --input: 217.2 32.6% 17.5%;\n    --ring: 212.7 26.8% 83.9%;\n  }\n}\n\n@layer base {\n  * {\n    @apply border-border;\n  }\n  body {\n    @apply bg-background text-foreground;\n  }\n}";
+const NAMESPACE = 'sekiui';
+const BUILD = /* sekiui */ { hydratedSelectorName: "hydrated", lazyLoad: true, propChangeCallback: false, updatable: true};
 
 /*
- Stencil Client Platform v4.37.1 | MIT Licensed | https://stenciljs.com
+ Stencil Client Platform v4.38.0 | MIT Licensed | https://stenciljs.com
  */
 var __defProp = Object.defineProperty;
 var __export = (target, all) => {
@@ -30,13 +29,17 @@ var registerHost = (hostElement, cmpMeta) => {
     $flags$: 0,
     $hostElement$: hostElement,
     $cmpMeta$: cmpMeta,
-    $instanceValues$: /* @__PURE__ */ new Map()
+    $instanceValues$: /* @__PURE__ */ new Map(),
+    $serializerValues$: /* @__PURE__ */ new Map()
   };
   {
     hostRef.$onReadyPromise$ = new Promise((r) => hostRef.$onReadyResolve$ = r);
     hostElement["s-p"] = [];
     hostElement["s-rc"] = [];
   }
+  {
+    hostRef.$fetchedCbList$ = [];
+  }
   const ref = hostRef;
   hostElement.__stencil__getHostRef = () => ref;
   return ref;
@@ -56,36 +59,7 @@ var loadModule = (cmpMeta, hostRef, hmrVersionId) => {
   if (module) {
     return module[exportName];
   }
-  
-        if (!hmrVersionId || !BUILD.hotModuleReplacement) {
-          const processMod = importedModule => {
-              cmpModules.set(bundleId, importedModule);
-              return importedModule[exportName];
-          }
-          switch(bundleId) {
-              
-                case 'seki-button':
-                    return import(
-                      /* webpackMode: "lazy" */
-                      './seki-button.entry.js').then(processMod, consoleError);
-                case 'seki-card':
-                    return import(
-                      /* webpackMode: "lazy" */
-                      './seki-card.entry.js').then(processMod, consoleError);
-                case 'seki-card-content':
-                    return import(
-                      /* webpackMode: "lazy" */
-                      './seki-card-content.entry.js').then(processMod, consoleError);
-                case 'seki-card-header':
-                    return import(
-                      /* webpackMode: "lazy" */
-                      './seki-card-header.entry.js').then(processMod, consoleError);
-                case 'seki-card-title':
-                    return import(
-                      /* webpackMode: "lazy" */
-                      './seki-card-title.entry.js').then(processMod, consoleError);
-          }
-      }
+  /*!__STENCIL_STATIC_IMPORT_SWITCH__*/
   return import(
     /* @vite-ignore */
     /* webpackInclude: /\.entry\.js$/ */
@@ -231,10 +205,7 @@ var unwrapErr = (result) => {
 
 // src/utils/style.ts
 function createStyleSheetIfNeededAndSupported(styles2) {
-  if (!supportsConstructableStylesheets) return void 0;
-  const sheet = new CSSStyleSheet();
-  sheet.replaceSync(styles2);
-  return sheet;
+  return void 0;
 }
 
 // src/utils/shadow-root.ts
@@ -242,7 +213,7 @@ var globalStyleSheet;
 function createShadowRoot(cmpMeta) {
   var _a;
   const shadowRoot = this.attachShadow({ mode: "open" });
-  if (globalStyleSheet === void 0) globalStyleSheet = (_a = createStyleSheetIfNeededAndSupported(globalStyles)) != null ? _a : null;
+  if (globalStyleSheet === void 0) globalStyleSheet = (_a = createStyleSheetIfNeededAndSupported()) != null ? _a : null;
   if (globalStyleSheet) {
     if (supportsMutableAdoptedStyleSheets) {
       shadowRoot.adoptedStyleSheets.push(globalStyleSheet);
@@ -802,6 +773,11 @@ var dispatchHooks = (hostRef, isInitialLoad) => {
   }
   let maybePromise;
   if (isInitialLoad) {
+    {
+      if (hostRef.$fetchedCbList$.length) {
+        hostRef.$fetchedCbList$.forEach((cb) => cb(elm));
+      }
+    }
     maybePromise = safeCall(instance, "componentWillLoad", void 0, elm);
   } else {
     maybePromise = safeCall(instance, "componentWillUpdate", void 0, elm);
@@ -958,7 +934,7 @@ var setValue = (ref, propName, newVal, cmpMeta) => {
 var proxyComponent = (Cstr, cmpMeta, flags) => {
   var _a, _b;
   const prototype = Cstr.prototype;
-  if (cmpMeta.$members$ || BUILD.watchCallback) {
+  if (cmpMeta.$members$ || BUILD.propChangeCallback) {
     const members = Object.entries((_a = cmpMeta.$members$) != null ? _a : {});
     members.map(([memberName, [memberFlags]]) => {
       if ((memberFlags & 31 /* Prop */ || (flags & 2 /* proxyState */) && memberFlags & 32 /* State */)) {
@@ -992,8 +968,6 @@ var proxyComponent = (Cstr, cmpMeta, flags) => {
               const currentValue = memberFlags & 32 /* State */ ? this[memberName] : ref.$hostElement$[memberName];
               if (typeof currentValue === "undefined" && ref.$instanceValues$.get(memberName)) {
                 newValue = ref.$instanceValues$.get(memberName);
-              } else if (!ref.$instanceValues$.get(memberName) && currentValue) {
-                ref.$instanceValues$.set(memberName, currentValue);
               }
               origSetter.apply(this, [
                 parsePropertyValue(
@@ -1008,7 +982,7 @@ var proxyComponent = (Cstr, cmpMeta, flags) => {
               if ((flags & 1 /* isElementConstructor */) === 0 || (cmpMeta.$members$[memberName][0] & 4096 /* Setter */) === 0) {
                 setValue(this, memberName, newValue, cmpMeta);
                 if (flags & 1 /* isElementConstructor */ && !ref.$lazyInstance$) {
-                  ref.$onReadyPromise$.then(() => {
+                  ref.$fetchedCbList$.push(() => {
                     if (cmpMeta.$members$[memberName][0] & 4096 /* Setter */ && ref.$lazyInstance$[memberName] !== ref.$instanceValues$.get(memberName)) {
                       ref.$lazyInstance$[memberName] = newValue;
                     }
@@ -1029,7 +1003,9 @@ var proxyComponent = (Cstr, cmpMeta, flags) => {
               if (ref.$lazyInstance$) {
                 setterSetVal();
               } else {
-                ref.$onReadyPromise$.then(() => setterSetVal());
+                ref.$fetchedCbList$.push(() => {
+                  setterSetVal();
+                });
               }
             }
           }
@@ -1042,14 +1018,15 @@ var proxyComponent = (Cstr, cmpMeta, flags) => {
         plt.jmp(() => {
           var _a2;
           const propName = attrNameToPropName.get(attrName);
+          const hostRef = getHostRef(this);
           if (this.hasOwnProperty(propName) && BUILD.lazyLoad) {
             newValue = this[propName];
             delete this[propName];
-          } else if (prototype.hasOwnProperty(propName) && typeof this[propName] === "number" && // cast type to number to avoid TS compiler issues
+          }
+          if (prototype.hasOwnProperty(propName) && typeof this[propName] === "number" && // cast type to number to avoid TS compiler issues
           this[propName] == newValue) {
             return;
           } else if (propName == null) {
-            const hostRef = getHostRef(this);
             const flags2 = hostRef == null ? void 0 : hostRef.$flags$;
             if (hostRef && flags2 && !(flags2 & 8 /* isConstructingInstance */) && flags2 & 128 /* isWatchReady */ && newValue !== oldValue) {
               const instance = hostRef.$lazyInstance$ ;
@@ -1064,7 +1041,7 @@ var proxyComponent = (Cstr, cmpMeta, flags) => {
           }
           const propDesc = Object.getOwnPropertyDescriptor(prototype, propName);
           newValue = newValue === null && typeof this[propName] === "boolean" ? false : newValue;
-          if (newValue !== this[propName] && (!propDesc.get || !!propDesc.set)) {
+          if (newValue != this[propName] && (!propDesc.get || !!propDesc.set)) {
             this[propName] = newValue;
           }
         });
@@ -1174,7 +1151,7 @@ var connectedCallback = (elm) => {
       }
       if (cmpMeta.$members$) {
         Object.entries(cmpMeta.$members$).map(([memberName, [memberFlags]]) => {
-          if (memberFlags & 31 /* Prop */ && elm.hasOwnProperty(memberName)) {
+          if (memberFlags & 31 /* Prop */ && memberName in elm && elm[memberName] !== Object.prototype[memberName]) {
             const value = elm[memberName];
             delete elm[memberName];
             elm[memberName] = value;
@@ -1352,7 +1329,8 @@ var bootstrapLazy = (lazyBundles, options = {}) => {
 // src/runtime/nonce.ts
 var setNonce = (nonce) => plt.$nonce$ = nonce;
 
-export { Host as H, bootstrapLazy as b, globalScripts as g, h, promiseResolve as p, registerInstance as r, setNonce as s };
-//# sourceMappingURL=index-3X8Wsgjr.js.map
-
-//# sourceMappingURL=index-3X8Wsgjr.js.map
+exports.bootstrapLazy = bootstrapLazy;
+exports.h = h;
+exports.promiseResolve = promiseResolve;
+exports.registerInstance = registerInstance;
+exports.setNonce = setNonce;

package/dist/cjs/index.cjs.js

@@ -1,3 +1,2 @@
 'use strict';
 
-//# sourceMappingURL=index.cjs.js.map

package/dist/cjs/loader.cjs.js

@@ -1,13 +1,13 @@
 'use strict';
 
-var index = require('./index-BxbILFLe.js');
+var index = require('./index-6jIfEFyf.js');
+var appGlobals = require('./app-globals-V2Kpy_OQ.js');
 
 const defineCustomElements = async (win, options) => {
   if (typeof window === 'undefined') return undefined;
-  await index.globalScripts();
-  return index.bootstrapLazy([["seki-button.cjs",[[257,"seki-button",{"variant":[1],"size":[1],"disabled":[4]}]]],["seki-card.cjs",[[257,"seki-card"]]],["seki-card-content.cjs",[[257,"seki-card-content"]]],["seki-card-header.cjs",[[257,"seki-card-header"]]],["seki-card-title.cjs",[[257,"seki-card-title"]]]], options);
+  await appGlobals.globalScripts();
+  return index.bootstrapLazy([["seki-button.cjs",[[257,"seki-button",{"variant":[1],"size":[1],"disabled":[4],"type":[1]}]]]], options);
 };
 
 exports.setNonce = index.setNonce;
 exports.defineCustomElements = defineCustomElements;
-//# sourceMappingURL=loader.cjs.js.map

package/dist/cjs/seki-button.cjs.entry.js

@@ -1,46 +1,21 @@
 'use strict';
 
-var index = require('./index-BxbILFLe.js');
+var index = require('./index-6jIfEFyf.js');
 
-const sekiButtonCss = "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n/* shadcn/ui design tokens */\n@layer base {\n  :root {\n    --background: 0 0% 100%;\n    --foreground: 222.2 84% 4.9%;\n    --card: 0 0% 100%;\n    --card-foreground: 222.2 84% 4.9%;\n    --popover: 0 0% 100%;\n    --popover-foreground: 222.2 84% 4.9%;\n    --primary: 222.2 47.4% 11.2%;\n    --primary-foreground: 210 40% 98%;\n    --secondary: 210 40% 96%;\n    --secondary-foreground: 222.2 84% 4.9%;\n    --muted: 210 40% 96%;\n    --muted-foreground: 215.4 16.3% 46.9%;\n    --accent: 210 40% 96%;\n    --accent-foreground: 222.2 84% 4.9%;\n    --destructive: 0 84.2% 60.2%;\n    --destructive-foreground: 210 40% 98%;\n    --border: 214.3 31.8% 91.4%;\n    --input: 214.3 31.8% 91.4%;\n    --ring: 222.2 84% 4.9%;\n    --radius: 0.5rem;\n  }\n\n  .dark {\n    --background: 222.2 84% 4.9%;\n    --foreground: 210 40% 98%;\n    --card: 222.2 84% 4.9%;\n    --card-foreground: 210 40% 98%;\n    --popover: 222.2 84% 4.9%;\n    --popover-foreground: 210 40% 98%;\n    --primary: 210 40% 98%;\n    --primary-foreground: 222.2 47.4% 11.2%;\n    --secondary: 217.2 32.6% 17.5%;\n    --secondary-foreground: 210 40% 98%;\n    --muted: 217.2 32.6% 17.5%;\n    --muted-foreground: 215 20.2% 65.1%;\n    --accent: 217.2 32.6% 17.5%;\n    --accent-foreground: 210 40% 98%;\n    --destructive: 0 62.8% 30.6%;\n    --destructive-foreground: 210 40% 98%;\n    --border: 217.2 32.6% 17.5%;\n    --input: 217.2 32.6% 17.5%;\n    --ring: 212.7 26.8% 83.9%;\n  }\n}\n\n@layer base {\n  * {\n    @apply border-border;\n  }\n  body {\n    @apply bg-background text-foreground;\n  }\n}";
+const sekiButtonCss = ":root{--seki-neutral-50:hsl(0, 0%, 98%);--seki-neutral-100:hsl(0, 0%, 96%);--seki-neutral-200:hsl(0, 0%, 90%);--seki-neutral-300:hsl(0, 0%, 83%);--seki-neutral-400:hsl(0, 0%, 64%);--seki-neutral-500:hsl(0, 0%, 45%);--seki-neutral-600:hsl(0, 0%, 32%);--seki-neutral-700:hsl(0, 0%, 25%);--seki-neutral-800:hsl(0, 0%, 15%);--seki-neutral-900:hsl(0, 0%, 9%);--seki-neutral-950:hsl(0, 0%, 4%);--seki-primary-50:hsl(210, 100%, 97%);--seki-primary-100:hsl(210, 95%, 93%);--seki-primary-200:hsl(210, 95%, 85%);--seki-primary-300:hsl(210, 90%, 73%);--seki-primary-400:hsl(210, 85%, 58%);--seki-primary-500:hsl(210, 80%, 48%);--seki-primary-600:hsl(210, 75%, 40%);--seki-primary-700:hsl(210, 70%, 32%);--seki-primary-800:hsl(210, 65%, 25%);--seki-primary-900:hsl(210, 60%, 18%);--seki-primary-950:hsl(210, 55%, 10%);--seki-success-500:hsl(142, 71%, 45%);--seki-success-600:hsl(142, 71%, 35%);--seki-warning-500:hsl(38, 92%, 50%);--seki-warning-600:hsl(38, 92%, 40%);--seki-destructive-500:hsl(0, 72%, 51%);--seki-destructive-600:hsl(0, 72%, 41%)}:root{--seki-bg-primary:var(--seki-neutral-50);--seki-bg-secondary:var(--seki-neutral-100);--seki-bg-tertiary:var(--seki-neutral-200);--seki-text-primary:var(--seki-neutral-900);--seki-text-secondary:var(--seki-neutral-600);--seki-text-tertiary:var(--seki-neutral-400);--seki-border-default:var(--seki-neutral-200);--seki-border-emphasis:var(--seki-neutral-300);--seki-accent:var(--seki-primary-500);--seki-accent-emphasis:var(--seki-primary-600);--seki-success:var(--seki-success-500);--seki-warning:var(--seki-warning-500);--seki-destructive:var(--seki-destructive-500)}:root[data-theme='dark']{--seki-bg-primary:var(--seki-neutral-950);--seki-bg-secondary:var(--seki-neutral-900);--seki-bg-tertiary:var(--seki-neutral-800);--seki-text-primary:var(--seki-neutral-50);--seki-text-secondary:var(--seki-neutral-400);--seki-text-tertiary:var(--seki-neutral-600);--seki-border-default:var(--seki-neutral-800);--seki-border-emphasis:var(--seki-neutral-700);--seki-accent:var(--seki-primary-400);--seki-accent-emphasis:var(--seki-primary-300);}:root{--seki-button-primary-bg:var(--seki-accent);--seki-button-primary-text:var(--seki-neutral-50);--seki-button-primary-border:transparent;--seki-button-primary-hover-bg:var(--seki-accent-emphasis);--seki-button-primary-hover-border:transparent;--seki-button-secondary-bg:var(--seki-bg-secondary);--seki-button-secondary-text:var(--seki-text-primary);--seki-button-secondary-border:var(--seki-border-default);--seki-button-secondary-hover-bg:var(--seki-bg-tertiary);--seki-button-secondary-hover-border:var(--seki-border-emphasis);--seki-button-outline-bg:transparent;--seki-button-outline-text:var(--seki-accent);--seki-button-outline-border:var(--seki-accent);--seki-button-outline-hover-bg:var(--seki-accent);--seki-button-outline-hover-text:var(--seki-neutral-50);--seki-button-outline-hover-border:var(--seki-accent);--seki-button-ghost-bg:transparent;--seki-button-ghost-text:var(--seki-text-primary);--seki-button-ghost-border:transparent;--seki-button-ghost-hover-bg:var(--seki-bg-secondary);--seki-button-ghost-hover-border:transparent;--seki-button-destructive-bg:var(--seki-destructive);--seki-button-destructive-text:var(--seki-neutral-50);--seki-button-destructive-border:transparent;--seki-button-destructive-hover-bg:var(--seki-destructive-600);--seki-button-destructive-hover-border:transparent;--seki-button-sm-padding-x:var(--seki-spacing-3, 0.75rem);--seki-button-sm-padding-y:var(--seki-spacing-1-5, 0.375rem);--seki-button-sm-font-size:var(--seki-text-sm, 0.875rem);--seki-button-sm-height:2rem;--seki-button-md-padding-x:var(--seki-spacing-4, 1rem);--seki-button-md-padding-y:var(--seki-spacing-2, 0.5rem);--seki-button-md-font-size:var(--seki-text-base, 1rem);--seki-button-md-height:2.5rem;--seki-button-lg-padding-x:var(--seki-spacing-5, 1.25rem);--seki-button-lg-padding-y:var(--seki-spacing-2-5, 0.625rem);--seki-button-lg-font-size:var(--seki-text-lg, 1.125rem);--seki-button-lg-height:3rem;--seki-button-radius:var(--seki-radius-md, 0.375rem);--seki-button-font-weight:var(--seki-font-medium, 500);--seki-button-transition-duration:150ms;--seki-button-transition-timing:ease-in-out;--seki-button-shadow:var(--seki-shadow-sm, 0 1px 2px 0 rgb(0 0 0 / 0.05));--seki-button-shadow-hover:var(--seki-shadow-md, 0 4px 6px -1px rgb(0 0 0 / 0.1));--seki-button-disabled-opacity:0.5}:root{--seki-spacing-0:0;--seki-spacing-0-5:0.125rem;--seki-spacing-1:0.25rem;--seki-spacing-1-5:0.375rem;--seki-spacing-2:0.5rem;--seki-spacing-2-5:0.625rem;--seki-spacing-3:0.75rem;--seki-spacing-3-5:0.875rem;--seki-spacing-4:1rem;--seki-spacing-5:1.25rem;--seki-spacing-6:1.5rem;--seki-spacing-8:2rem;--seki-spacing-10:2.5rem;--seki-spacing-12:3rem;--seki-spacing-16:4rem;--seki-spacing-20:5rem;--seki-spacing-24:6rem;}:root{--seki-shadow-sm:0 1px 2px 0 rgb(0 0 0 / 0.05);--seki-shadow-md:0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);--seki-shadow-lg:0 10px 15px -3px rgb(0 0 0 / 0.15), 0 4px 6px -4px rgb(0 0 0 / 0.1)}:root{--seki-font-sans:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue',\n    Arial, sans-serif;--seki-font-mono:ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;--seki-text-xs:0.75rem;--seki-text-sm:0.875rem;--seki-text-base:1rem;--seki-text-lg:1.125rem;--seki-text-xl:1.25rem;--seki-text-2xl:1.5rem;--seki-text-3xl:1.875rem;--seki-text-4xl:2.25rem;--seki-font-normal:400;--seki-font-medium:500;--seki-font-semibold:600;--seki-font-bold:700;--seki-leading-tight:1.25;--seki-leading-normal:1.5;--seki-leading-relaxed:1.75}:root{--seki-radius-sm:0.25rem;--seki-radius-md:0.375rem;--seki-radius-lg:0.5rem;--seki-radius-xl:1rem;}:host{display:inline-block}.button{font-family:var(--seki-font-sans);font-weight:var(--seki-button-font-weight);border-radius:var(--seki-button-radius);cursor:pointer;border:1px solid;transition:background-color var(--seki-button-transition-duration) var(--seki-button-transition-timing),\n              border-color var(--seki-button-transition-duration) var(--seki-button-transition-timing),\n              color var(--seki-button-transition-duration) var(--seki-button-transition-timing),\n              box-shadow var(--seki-button-transition-duration) var(--seki-button-transition-timing);box-shadow:var(--seki-button-shadow)}.button:hover:not(:disabled){box-shadow:var(--seki-button-shadow-hover)}.button:focus-visible{outline:2px solid var(--seki-accent);outline-offset:2px}.button:disabled{opacity:var(--seki-button-disabled-opacity);cursor:not-allowed}.button--primary{background:var(--seki-button-primary-bg);color:var(--seki-button-primary-text);border-color:var(--seki-button-primary-border)}.button--primary:hover:not(:disabled){background:var(--seki-button-primary-hover-bg);border-color:var(--seki-button-primary-hover-border)}.button--secondary{background:var(--seki-button-secondary-bg);color:var(--seki-button-secondary-text);border-color:var(--seki-button-secondary-border)}.button--secondary:hover:not(:disabled){background:var(--seki-button-secondary-hover-bg);border-color:var(--seki-button-secondary-hover-border)}.button--outline{background:var(--seki-button-outline-bg);color:var(--seki-button-outline-text);border-color:var(--seki-button-outline-border)}.button--outline:hover:not(:disabled){background:var(--seki-button-outline-hover-bg);color:var(--seki-button-outline-hover-text);border-color:var(--seki-button-outline-hover-border)}.button--ghost{background:var(--seki-button-ghost-bg);color:var(--seki-button-ghost-text);border-color:var(--seki-button-ghost-border)}.button--ghost:hover:not(:disabled){background:var(--seki-button-ghost-hover-bg);border-color:var(--seki-button-ghost-hover-border)}.button--destructive{background:var(--seki-button-destructive-bg);color:var(--seki-button-destructive-text);border-color:var(--seki-button-destructive-border)}.button--destructive:hover:not(:disabled){background:var(--seki-button-destructive-hover-bg);border-color:var(--seki-button-destructive-hover-border)}.button--sm{padding:var(--seki-button-sm-padding-y) var(--seki-button-sm-padding-x);font-size:var(--seki-button-sm-font-size);height:var(--seki-button-sm-height)}.button--md{padding:var(--seki-button-md-padding-y) var(--seki-button-md-padding-x);font-size:var(--seki-button-md-font-size);height:var(--seki-button-md-height)}.button--lg{padding:var(--seki-button-lg-padding-y) var(--seki-button-lg-padding-x);font-size:var(--seki-button-lg-font-size);height:var(--seki-button-lg-height)}@media (prefers-reduced-motion: reduce){.button{transition:none}}";
 
 const SekiButton = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.variant = 'default';
-        this.size = 'default';
+        this.variant = 'primary';
+        this.size = 'md';
         this.disabled = false;
-    }
-    getVariantClasses() {
-        const variants = {
-            default: 'bg-primary text-primary-foreground hover:bg-primary/90',
-            destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive/90',
-            outline: 'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
-            secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
-            ghost: 'hover:bg-accent hover:text-accent-foreground',
-            link: 'text-primary underline-offset-4 hover:underline',
-        };
-        return variants[this.variant];
-    }
-    getSizeClasses() {
-        const sizes = {
-            default: 'h-10 px-4 py-2',
-            sm: 'h-9 rounded-md px-3',
-            lg: 'h-11 rounded-md px-8',
-            icon: 'h-10 w-10',
-        };
-        return sizes[this.size];
+        this.type = 'button';
     }
     render() {
-        const classes = [
-            'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
-            this.getVariantClasses(),
-            this.getSizeClasses(),
-        ].join(' ');
-        return (index.h(index.Host, { key: 'c4ee82237138aa7199fda3fac536d3d0e4f93177' }, index.h("button", { key: '4705d51d384092e63d902db3d59bd79866eb105d', class: classes, disabled: this.disabled, part: "button" }, index.h("slot", { key: 'b0e5909326c0e23fd0b611411eaa0b402c90cee3' }))));
+        return (index.h("button", { key: '0a0740566a19505743488924d3971f75cf086ab8', class: `button button--${this.variant} button--${this.size}`, type: this.type, disabled: this.disabled, "aria-disabled": this.disabled ? 'true' : null }, index.h("slot", { key: '6c715e7b707efb6dffc4b88773d7ea63c510f305' })));
     }
 };
 SekiButton.style = sekiButtonCss;
 
 exports.seki_button = SekiButton;
-//# sourceMappingURL=seki-button.entry.cjs.js.map

package/dist/cjs/sekiui.cjs.js

@@ -1,10 +1,11 @@
 'use strict';
 
-var index = require('./index-BxbILFLe.js');
+var index = require('./index-6jIfEFyf.js');
+var appGlobals = require('./app-globals-V2Kpy_OQ.js');
 
 var _documentCurrentScript = typeof document !== 'undefined' ? document.currentScript : null;
 /*
- Stencil Client Patch Browser v4.37.1 | MIT Licensed | https://stenciljs.com
+ Stencil Client Patch Browser v4.38.0 | MIT Licensed | https://stenciljs.com
  */
 
 var patchBrowser = () => {
@@ -17,9 +18,8 @@ var patchBrowser = () => {
 };
 
 patchBrowser().then(async (options) => {
-  await index.globalScripts();
-  return index.bootstrapLazy([["seki-button.cjs",[[257,"seki-button",{"variant":[1],"size":[1],"disabled":[4]}]]],["seki-card.cjs",[[257,"seki-card"]]],["seki-card-content.cjs",[[257,"seki-card-content"]]],["seki-card-header.cjs",[[257,"seki-card-header"]]],["seki-card-title.cjs",[[257,"seki-card-title"]]]], options);
+  await appGlobals.globalScripts();
+  return index.bootstrapLazy([["seki-button.cjs",[[257,"seki-button",{"variant":[1],"size":[1],"disabled":[4],"type":[1]}]]]], options);
 });
 
 exports.setNonce = index.setNonce;
-//# sourceMappingURL=sekiui.cjs.js.map

package/dist/collection/collection-manifest.json

@@ -1,14 +1,10 @@
 {
   "entries": [
-    "components/seki-button/seki-button.js",
-    "components/seki-card/seki-card.js",
-    "components/seki-card-content/seki-card-content.js",
-    "components/seki-card-header/seki-card-header.js",
-    "components/seki-card-title/seki-card-title.js"
+    "components/button/seki-button.js"
   ],
   "compiler": {
     "name": "@stencil/core",
-    "version": "4.37.1",
+    "version": "4.38.0",
     "typescriptVersion": "5.5.4"
   },
   "collections": [],