@sekiui/elements 0.0.24 → 0.0.26

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (35) hide show
  1. package/README.md +10 -257
  2. package/dist/cjs/{index-6jIfEFyf.js → index-B1pILoQg.js} +61 -2
  3. package/dist/cjs/loader.cjs.js +2 -2
  4. package/dist/cjs/seki-button.cjs.entry.js +2 -2
  5. package/dist/cjs/seki-input.cjs.entry.js +66 -0
  6. package/dist/cjs/seki-skeleton.cjs.entry.js +25 -0
  7. package/dist/cjs/sekiui.cjs.js +2 -2
  8. package/dist/collection/collection-manifest.json +3 -1
  9. package/dist/collection/components/button/seki-button.css +20 -0
  10. package/dist/collection/components/input/seki-input.css +446 -0
  11. package/dist/collection/components/input/seki-input.js +503 -0
  12. package/dist/collection/components/skeleton/seki-skeleton.css +383 -0
  13. package/dist/collection/components/skeleton/seki-skeleton.js +61 -0
  14. package/dist/components/index.js +65 -3
  15. package/dist/components/seki-button.js +1 -1
  16. package/dist/components/seki-input.d.ts +11 -0
  17. package/dist/components/seki-input.js +104 -0
  18. package/dist/components/seki-skeleton.d.ts +11 -0
  19. package/dist/components/seki-skeleton.js +46 -0
  20. package/dist/esm/{index-BROrRAlq.js → index-CLC2YwJ6.js} +61 -3
  21. package/dist/esm/loader.js +3 -3
  22. package/dist/esm/seki-button.entry.js +2 -2
  23. package/dist/esm/seki-input.entry.js +64 -0
  24. package/dist/esm/seki-skeleton.entry.js +23 -0
  25. package/dist/esm/sekiui.js +3 -3
  26. package/dist/sekiui/{p-a3520082.entry.js → p-10c9b8b2.entry.js} +1 -1
  27. package/dist/sekiui/p-6573bc92.entry.js +1 -0
  28. package/dist/sekiui/p-6bb2c486.entry.js +1 -0
  29. package/dist/sekiui/p-CLC2YwJ6.js +2 -0
  30. package/dist/sekiui/sekiui.esm.js +1 -1
  31. package/dist/types/components/input/seki-input.d.ts +107 -0
  32. package/dist/types/components/skeleton/seki-skeleton.d.ts +15 -0
  33. package/dist/types/components.d.ts +250 -0
  34. package/package.json +1 -1
  35. package/dist/sekiui/p-BROrRAlq.js +0 -2
package/README.md CHANGED
@@ -12,6 +12,15 @@ Modern, accessible Web Components library built with Stencil.js, inspired by sha
12
12
  - 🎭 **Storybook**: Interactive component documentation
13
13
  - 🔧 **Tree-shakeable**: Import only what you need
14
14
 
15
+ ## Components
16
+
17
+ ### Available Components
18
+
19
+ - **Button** (`seki-button`) - Versatile button component with multiple variants (primary, secondary, outline, ghost, destructive, link) and sizes
20
+ - **Input** (`seki-input`) - Fully accessible form input with support for all HTML input types, validation, and error states
21
+
22
+ [View all components in Storybook →](https://sekiui-storybook.pages.dev)
23
+
15
24
  ## Installation
16
25
 
17
26
  ### Via npm (Recommended)
@@ -78,6 +87,7 @@ For quick prototyping or projects without a build system, you can load SekiUI di
78
87
  <script type="module" src="node_modules/@sekiui/components/dist/sekiui/sekiui.esm.js"></script>
79
88
 
80
89
  <seki-button variant="default">Click me</seki-button>
90
+ <seki-input type="email" placeholder="you@example.com"></seki-input>
81
91
  ```
82
92
 
83
93
  ### React
@@ -170,263 +180,6 @@ Then use in your templates:
170
180
  <seki-button variant="default">Click me</seki-button>
171
181
  ```
172
182
 
173
- ## Development Setup
174
-
175
- ### Prerequisites
176
-
177
- - Node.js 20.x or later
178
- - npm or yarn
179
-
180
- ### Install Dependencies
181
-
182
- ```bash
183
- npm install
184
- ```
185
-
186
- ### Development Server
187
-
188
- ```bash
189
- npm start
190
- ```
191
-
192
- ### Build
193
-
194
- ```bash
195
- npm run build
196
- ```
197
-
198
- ### Storybook
199
-
200
- ```bash
201
- npm run storybook
202
- ```
203
-
204
- ### Version Management Tool
205
-
206
- For accurate version comparison when creating releases, install the `semver` CLI globally:
207
-
208
- ```bash
209
- npm install -g semver
210
- ```
211
-
212
- 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.
213
-
214
- **Why semver?**
215
- - Accurate semantic version comparison (handles 1.0.0-beta.1 vs 1.0.0 correctly)
216
- - Validates version ranges and constraints
217
- - Official npm semver library
218
-
219
- **Fallback behavior:**
220
- If `semver` is not installed, the release script will warn you and ask for confirmation before proceeding with basic validation.
221
-
222
- ## Releasing New Versions
223
-
224
- ### Automated Release Process
225
-
226
- SekiUI uses an automated npm publishing workflow that triggers when you push version tags to GitHub.
227
-
228
- #### Using the Release Helper Script (Recommended)
229
-
230
- The easiest way to create a new release:
231
-
232
- ```bash
233
- npm run release
234
- ```
235
-
236
- **What the script does:**
237
- 1. Fetches the latest published version from npm
238
- 2. Prompts you for the new version number
239
- 3. Validates that the new version is greater than the latest
240
- 4. **Rejects versions that are less than or equal to the latest**
241
- 5. Creates a git tag with 'v' prefix (e.g., v1.0.0)
242
- 6. Pushes the tag to GitHub
243
- 7. Triggers the automated publish workflow
244
-
245
- **Example:**
246
- ```bash
247
- $ npm run release
248
-
249
- 🚀 SekiUI Release Helper
250
- ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
251
- 📡 Fetching latest version from npm registry...
252
- ✓ Current latest version on npm: 0.1.1
253
-
254
- Minimum allowed version: 0.1.2
255
-
256
- Enter new version: 0.1.0
257
- ❌ Error: Version 0.1.0 is not greater than current version 0.1.1
258
- Minimum allowed version: 0.1.2
259
-
260
- Enter new version: 0.2.0
261
- ✓ Version 0.2.0 is valid (greater than 0.1.1)
262
-
263
- 📝 Creating git tag: v0.2.0
264
- ✓ Tag created locally
265
-
266
- 🚀 Pushing tag to origin...
267
-
268
- ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
269
- ✅ Success! Tag v0.2.0 pushed to GitHub
270
- ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
271
-
272
- 📦 The GitHub Actions workflow will now:
273
- 1. Build the project
274
- 2. Run tests
275
- 3. Publish to npm as version 0.2.0
276
-
277
- 🔍 Monitor progress at:
278
- https://github.com/YourOrg/SekiUI/actions
279
- ```
280
-
281
- #### Manual Tag Creation (Alternative)
282
-
283
- If you prefer to create tags manually:
284
-
285
- ```bash
286
- # Create a tag with 'v' prefix
287
- git tag v1.0.0
288
-
289
- # Push the tag to GitHub
290
- git push origin v1.0.0
291
- ```
292
-
293
- **Important:** Always use the 'v' prefix (e.g., v1.0.0, not 1.0.0). The workflow only triggers on tags matching `v*.*.*`.
294
-
295
- ### Versioning Guidelines
296
-
297
- Follow [Semantic Versioning](https://semver.org/):
298
-
299
- - **MAJOR** (v2.0.0): Breaking changes, removed features, changed API
300
- - **MINOR** (v1.1.0): New features, backward-compatible enhancements
301
- - **PATCH** (v1.0.1): Bug fixes, documentation updates, internal refactors
302
-
303
- **Pre-release versions:**
304
- - Alpha: v1.0.0-alpha.1, v1.0.0-alpha.2, ...
305
- - Beta: v1.0.0-beta.1, v1.0.0-beta.2, ...
306
- - Release Candidate: v1.0.0-rc.1, v1.0.0-rc.2, ...
307
-
308
- Pre-release versions are published with the `next` tag on npm and won't be installed by default.
309
-
310
- ### What Happens After Pushing a Tag
311
-
312
- The automated GitHub Actions workflow:
313
-
314
- 1. ✅ **Validates NPM_TOKEN** - Fails fast if secret is missing
315
- 2. 📦 **Installs dependencies** - Clean install with `npm ci`
316
- 3. 🔢 **Extracts version** - Strips 'v' prefix from tag
317
- 4. 🔄 **Syncs package.json** - Updates version to match tag
318
- 5. 🏗️ **Builds project** - Compiles TypeScript and generates dist/
319
- 6. ✅ **Validates build** - Ensures dist/ folder exists
320
- 7. 🚀 **Publishes to npm** - Uploads to npm registry
321
- 8. 🏷️ **Applies dist-tag** - Uses `latest` for stable, `next` for pre-releases
322
- 9. 📡 **Deploys to CDN** - Uploads to GitHub Pages (versioned path)
323
- 10. 🔄 **Updates latest CDN** - Updates `/latest/` path for stable releases only
324
- 11. 📋 **Reports URLs** - Logs CDN URLs in workflow output
325
-
326
- ### Monitoring Workflow Status
327
-
328
- After pushing a tag:
329
-
330
- 1. Go to the **Actions** tab in GitHub
331
- 2. Find the "Publish to npm" workflow
332
- 3. Click to view real-time logs
333
- 4. Green checkmark = successful publish
334
- 5. Red X = failure (check logs for details)
335
-
336
- ### First-Time Setup (Maintainers Only)
337
-
338
- **One-time setup required before releasing:**
339
-
340
- #### 1. NPM_TOKEN Setup
341
-
342
- 1. **Generate npm token:**
343
- - Log in to [npmjs.com](https://npmjs.com)
344
- - Go to Account → Access Tokens
345
- - Click "Generate New Token"
346
- - Select **Automation** token type
347
- - Copy the token (shown only once!)
348
-
349
- 2. **Add token to GitHub:**
350
- - Go to repository Settings → Secrets and variables → Actions
351
- - Click "New repository secret"
352
- - Name: `NPM_TOKEN`
353
- - Value: Paste your npm token
354
- - Click "Add secret"
355
-
356
- #### 2. GitHub Pages Setup (CDN Deployment)
357
-
358
- **Required for CDN deployment to work:**
359
-
360
- 1. **Enable GitHub Pages:**
361
- - Go to repository Settings → Pages
362
- - Under "Source", select: **Deploy from a branch**
363
- - Branch: **gh-pages** / (root)
364
- - Click "Save"
365
-
366
- 2. **What this enables:**
367
- - Automatic CDN deployment after npm publish
368
- - Versioned URLs: `https://sekiui.github.io/SekiUI/v1.0.0/sekiui.esm.js`
369
- - Latest URL: `https://sekiui.github.io/SekiUI/latest/sekiui.esm.js`
370
-
371
- 3. **Important notes:**
372
- - CDN deployment is **non-blocking** - npm publish succeeds even if CDN fails
373
- - First deployment creates the `gh-pages` branch automatically
374
- - Pre-release versions deploy to versioned paths only (latest path not updated)
375
-
376
- #### 3. Verify Setup
377
-
378
- 1. Create a test tag (e.g., v0.1.0-test.1)
379
- 2. Push the tag: `git push origin v0.1.0-test.1`
380
- 3. Check GitHub Actions logs
381
- 4. Verify:
382
- - ✅ Package published to npm
383
- - ✅ CDN URLs accessible (check workflow output for URLs)
384
- 5. If successful, delete the test version from npm
385
-
386
- ### Troubleshooting
387
-
388
- **"NPM_TOKEN secret is not set"**
389
- - Add NPM_TOKEN to repository secrets (see setup above)
390
-
391
- **"You cannot publish over the previously published versions"**
392
- - You're trying to publish a version that already exists
393
- - Increment the version number and try again
394
-
395
- **"Build did not generate dist/ folder"**
396
- - Build failed due to TypeScript errors or configuration issues
397
- - Fix the errors and create a new tag
398
-
399
- **Tag pushed but workflow didn't run**
400
- - Ensure tag matches pattern `v*.*.*` (with lowercase 'v')
401
- - Check that workflow file exists in `.github/workflows/publish-npm.yml`
402
-
403
- **Release script rejects valid version**
404
- - Ensure `semver` CLI is installed: `npm install -g semver`
405
- - Or proceed with basic validation (less accurate for pre-releases)
406
-
407
- **CDN deployment failed but npm publish succeeded**
408
- - This is expected behavior (non-blocking deployment)
409
- - Check GitHub Pages is enabled in repository settings
410
- - Verify `gh-pages` branch exists (created automatically on first deploy)
411
- - CDN will be updated on next successful release
412
- - jsDelivr CDN still works (auto-syncs from npm)
413
-
414
- **CDN URLs not accessible**
415
- - Wait 1-2 minutes for GitHub Pages to propagate
416
- - Check GitHub Pages settings: Settings → Pages
417
- - Verify workflow completed successfully (check Actions tab)
418
- - Try jsDelivr URL as alternative: `https://cdn.jsdelivr.net/npm/@sekiui/elements@VERSION/dist/sekiui.esm.js`
419
-
420
- ## Contributing
421
-
422
- 1. Fork the repository
423
- 2. Create a feature branch (`git checkout -b feature/amazing-component`)
424
- 3. Make your changes
425
- 4. Run tests (`npm test`)
426
- 5. Commit your changes (`git commit -m 'feat: add amazing component'`)
427
- 6. Push to your branch (`git push origin feature/amazing-component`)
428
- 7. Open a Pull Request
429
-
430
183
  ## License
431
184
 
432
185
  MIT © SekiUI Team
@@ -423,6 +423,9 @@ var parsePropertyValue = (propValue, propType, isFormAssociated) => {
423
423
  return propValue === "false" ? false : propValue === "" || !!propValue;
424
424
  }
425
425
  }
426
+ if (propType & 2 /* Number */) {
427
+ return typeof propValue === "string" ? parseFloat(propValue) : typeof propValue === "number" ? propValue : NaN;
428
+ }
426
429
  if (propType & 1 /* String */) {
427
430
  return String(propValue);
428
431
  }
@@ -430,6 +433,25 @@ var parsePropertyValue = (propValue, propType, isFormAssociated) => {
430
433
  }
431
434
  return propValue;
432
435
  };
436
+ var getElement = (ref) => {
437
+ var _a;
438
+ return (_a = getHostRef(ref)) == null ? void 0 : _a.$hostElement$ ;
439
+ };
440
+
441
+ // src/runtime/event-emitter.ts
442
+ var createEvent = (ref, name, flags) => {
443
+ const elm = getElement(ref);
444
+ return {
445
+ emit: (detail) => {
446
+ return emitEvent(elm, name, {
447
+ bubbles: true,
448
+ composed: true,
449
+ cancelable: true,
450
+ detail
451
+ });
452
+ }
453
+ };
454
+ };
433
455
  var emitEvent = (elm, name, opts) => {
434
456
  const ev = plt.ce(name, opts);
435
457
  elm.dispatchEvent(ev);
@@ -440,7 +462,7 @@ var setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags, initialRen
440
462
  return;
441
463
  }
442
464
  let isProp = isMemberInElement(elm, memberName);
443
- memberName.toLowerCase();
465
+ let ln = memberName.toLowerCase();
444
466
  if (memberName === "class") {
445
467
  const classList = elm.classList;
446
468
  const oldClasses = parseClassList(oldValue);
@@ -449,7 +471,25 @@ var setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags, initialRen
449
471
  classList.remove(...oldClasses.filter((c) => c && !newClasses.includes(c)));
450
472
  classList.add(...newClasses.filter((c) => c && !oldClasses.includes(c)));
451
473
  }
452
- } else if (memberName === "key") ; else {
474
+ } else if (memberName === "key") ; else if ((!isProp ) && memberName[0] === "o" && memberName[1] === "n") {
475
+ if (memberName[2] === "-") {
476
+ memberName = memberName.slice(3);
477
+ } else if (isMemberInElement(win, ln)) {
478
+ memberName = ln.slice(2);
479
+ } else {
480
+ memberName = ln[2] + memberName.slice(3);
481
+ }
482
+ if (oldValue || newValue) {
483
+ const capture = memberName.endsWith(CAPTURE_EVENT_SUFFIX);
484
+ memberName = memberName.replace(CAPTURE_EVENT_REGEX, "");
485
+ if (oldValue) {
486
+ plt.rel(elm, memberName, oldValue, capture);
487
+ }
488
+ if (newValue) {
489
+ plt.ael(elm, memberName, newValue, capture);
490
+ }
491
+ }
492
+ } else {
453
493
  const isComplex = isComplexType(newValue);
454
494
  if ((isProp || isComplex && newValue !== null) && true) {
455
495
  try {
@@ -494,6 +534,8 @@ var parseClassList = (value) => {
494
534
  }
495
535
  return value.split(parseClassListRegex);
496
536
  };
537
+ var CAPTURE_EVENT_SUFFIX = "Capture";
538
+ var CAPTURE_EVENT_REGEX = new RegExp(CAPTURE_EVENT_SUFFIX + "$");
497
539
 
498
540
  // src/runtime/vdom/update-element.ts
499
541
  var updateElement = (oldVnode, newVnode, isSvgMode2, isInitialRender) => {
@@ -713,10 +755,19 @@ var insertBefore = (parent, newNode, reference) => {
713
755
  };
714
756
  var renderVdom = (hostRef, renderFnResults, isInitialLoad = false) => {
715
757
  const hostElm = hostRef.$hostElement$;
758
+ const cmpMeta = hostRef.$cmpMeta$;
716
759
  const oldVNode = hostRef.$vnode$ || newVNode(null, null);
717
760
  const isHostElement = isHost(renderFnResults);
718
761
  const rootVnode = isHostElement ? renderFnResults : h(null, null, renderFnResults);
719
762
  hostTagName = hostElm.tagName;
763
+ if (cmpMeta.$attrsToReflect$) {
764
+ rootVnode.$attrs$ = rootVnode.$attrs$ || {};
765
+ cmpMeta.$attrsToReflect$.forEach(([propName, attribute]) => {
766
+ {
767
+ rootVnode.$attrs$[attribute] = hostElm[propName];
768
+ }
769
+ });
770
+ }
720
771
  if (isInitialLoad && rootVnode.$attrs$) {
721
772
  for (const key of Object.keys(rootVnode.$attrs$)) {
722
773
  if (hostElm.hasAttribute(key) && !["key", "ref", "style", "class"].includes(key)) {
@@ -1050,8 +1101,12 @@ var proxyComponent = (Cstr, cmpMeta, flags) => {
1050
1101
  /* @__PURE__ */ new Set([
1051
1102
  ...Object.keys((_b = cmpMeta.$watchers$) != null ? _b : {}),
1052
1103
  ...members.filter(([_, m]) => m[0] & 31 /* HasAttribute */).map(([propName, m]) => {
1104
+ var _a2;
1053
1105
  const attrName = m[1] || propName;
1054
1106
  attrNameToPropName.set(attrName, propName);
1107
+ if (m[0] & 512 /* ReflectAttr */) {
1108
+ (_a2 = cmpMeta.$attrsToReflect$) == null ? void 0 : _a2.push([propName, attrName]);
1109
+ }
1055
1110
  return attrName;
1056
1111
  })
1057
1112
  ])
@@ -1227,6 +1282,9 @@ var bootstrapLazy = (lazyBundles, options = {}) => {
1227
1282
  {
1228
1283
  cmpMeta.$members$ = compactMeta[2];
1229
1284
  }
1285
+ {
1286
+ cmpMeta.$attrsToReflect$ = [];
1287
+ }
1230
1288
  const tagName = cmpMeta.$tagName$;
1231
1289
  const HostElement = class extends HTMLElement {
1232
1290
  // StencilLazyHost
@@ -1330,6 +1388,7 @@ var bootstrapLazy = (lazyBundles, options = {}) => {
1330
1388
  var setNonce = (nonce) => plt.$nonce$ = nonce;
1331
1389
 
1332
1390
  exports.bootstrapLazy = bootstrapLazy;
1391
+ exports.createEvent = createEvent;
1333
1392
  exports.h = h;
1334
1393
  exports.promiseResolve = promiseResolve;
1335
1394
  exports.registerInstance = registerInstance;
@@ -1,12 +1,12 @@
1
1
  'use strict';
2
2
 
3
- var index = require('./index-6jIfEFyf.js');
3
+ var index = require('./index-B1pILoQg.js');
4
4
  var appGlobals = require('./app-globals-V2Kpy_OQ.js');
5
5
 
6
6
  const defineCustomElements = async (win, options) => {
7
7
  if (typeof window === 'undefined') return undefined;
8
8
  await appGlobals.globalScripts();
9
- return index.bootstrapLazy([["seki-button.cjs",[[257,"seki-button",{"variant":[1],"size":[1],"disabled":[4],"type":[1],"ariaLabel":[1,"aria-label"]}]]]], options);
9
+ return index.bootstrapLazy([["seki-button.cjs",[[257,"seki-button",{"variant":[1],"size":[1],"disabled":[4],"type":[1],"ariaLabel":[1,"aria-label"]}]]],["seki-input.cjs",[[257,"seki-input",{"type":[1],"value":[1537],"placeholder":[1],"disabled":[4],"readonly":[4],"required":[4],"name":[1],"autocomplete":[1],"min":[8],"max":[8],"step":[8],"pattern":[1],"minlength":[2],"maxlength":[2],"size":[1],"invalid":[4],"ariaLabel":[1,"aria-label"],"ariaDescribedby":[1,"aria-describedby"]}]]],["seki-skeleton.cjs",[[257,"seki-skeleton",{"ariaLabel":[1,"aria-label"]}]]]], options);
10
10
  };
11
11
 
12
12
  exports.setNonce = index.setNonce;
@@ -1,8 +1,8 @@
1
1
  'use strict';
2
2
 
3
- var index = require('./index-6jIfEFyf.js');
3
+ var index = require('./index-B1pILoQg.js');
4
4
 
5
- const sekiButtonCss = ":root{--seki-neutral-50:hsl(0, 0%, 98%);--seki-neutral-100:hsl(0, 0%, 96.1%);--seki-neutral-200:hsl(0, 0%, 89.8%);--seki-neutral-300:hsl(0, 0%, 83.1%);--seki-neutral-400:hsl(0, 0%, 63.9%);--seki-neutral-500:hsl(0, 0%, 45.1%);--seki-neutral-600:hsl(0, 0%, 32.2%);--seki-neutral-700:hsl(0, 0%, 25.1%);--seki-neutral-800:hsl(0, 0%, 14.9%);--seki-neutral-900:hsl(0, 0%, 9%);--seki-neutral-950:hsl(0, 0%, 3.9%);--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, 84.2%, 60.2%);--seki-destructive-600:hsl(0, 72%, 41%)}:root{--seki-background:hsl(0, 0%, 100%);--seki-foreground:hsl(0, 0%, 3.9%);--seki-muted:hsl(0, 0%, 96.1%);--seki-muted-foreground:hsl(0, 0%, 45.1%);--seki-card:hsl(0, 0%, 100%);--seki-card-foreground:hsl(0, 0%, 3.9%);--seki-popover:hsl(0, 0%, 100%);--seki-popover-foreground:hsl(0, 0%, 3.9%);--seki-border:hsl(0, 0%, 89.8%);--seki-input:hsl(0, 0%, 89.8%);--seki-primary:hsl(0, 0%, 9%);--seki-primary-foreground:hsl(0, 0%, 98%);--seki-secondary:hsl(0, 0%, 96.1%);--seki-secondary-foreground:hsl(0, 0%, 9%);--seki-accent:hsl(0, 0%, 96.1%);--seki-accent-foreground:hsl(0, 0%, 9%);--seki-destructive:hsl(0, 84.2%, 60.2%);--seki-destructive-foreground:hsl(0, 0%, 98%);--seki-ring:hsl(0, 0%, 3.9%);--seki-bg-primary:var(--seki-background);--seki-bg-secondary:var(--seki-muted);--seki-bg-tertiary:var(--seki-accent);--seki-text-primary:var(--seki-foreground);--seki-text-secondary:var(--seki-muted-foreground);--seki-text-tertiary:var(--seki-neutral-400);--seki-border-default:var(--seki-border);--seki-border-emphasis:var(--seki-neutral-300)}:root[data-theme='dark']{--seki-background:hsl(0, 0%, 3.9%);--seki-foreground:hsl(0, 0%, 98%);--seki-muted:hsl(0, 0%, 14.9%);--seki-muted-foreground:hsl(0, 0%, 63.9%);--seki-card:hsl(0, 0%, 3.9%);--seki-card-foreground:hsl(0, 0%, 98%);--seki-popover:hsl(0, 0%, 3.9%);--seki-popover-foreground:hsl(0, 0%, 98%);--seki-border:hsl(0, 0%, 14.9%);--seki-input:hsl(0, 0%, 14.9%);--seki-primary:hsl(0, 0%, 98%);--seki-primary-foreground:hsl(0, 0%, 9%);--seki-secondary:hsl(0, 0%, 14.9%);--seki-secondary-foreground:hsl(0, 0%, 98%);--seki-accent:hsl(0, 0%, 14.9%);--seki-accent-foreground:hsl(0, 0%, 98%);--seki-destructive:hsl(0, 62.8%, 30.6%);--seki-destructive-foreground:hsl(0, 0%, 98%);--seki-ring:hsl(0, 0%, 83.1%);--seki-bg-primary:var(--seki-background);--seki-bg-secondary:var(--seki-muted);--seki-bg-tertiary:var(--seki-accent);--seki-text-primary:var(--seki-foreground);--seki-text-secondary:var(--seki-muted-foreground);--seki-text-tertiary:var(--seki-neutral-600);--seki-border-default:var(--seki-border);--seki-border-emphasis:var(--seki-neutral-700);--seki-button-primary-hover-bg:hsl(0, 0%, 98%, 0.9);--seki-button-secondary-hover-bg:hsl(0, 0%, 14.9%, 0.8)}:root{--seki-button-primary-bg:var(--seki-primary);--seki-button-primary-text:var(--seki-primary-foreground);--seki-button-primary-border:transparent;--seki-button-primary-hover-bg:hsl(0, 0%, 9%, 0.9);--seki-button-primary-hover-text:var(--seki-primary-foreground);--seki-button-primary-hover-border:transparent;--seki-button-secondary-bg:var(--seki-secondary);--seki-button-secondary-text:var(--seki-secondary-foreground);--seki-button-secondary-border:transparent;--seki-button-secondary-hover-bg:hsl(0, 0%, 96.1%, 0.8);--seki-button-secondary-hover-text:var(--seki-secondary-foreground);--seki-button-secondary-hover-border:transparent;--seki-button-outline-bg:transparent;--seki-button-outline-text:var(--seki-foreground);--seki-button-outline-border:var(--seki-input);--seki-button-outline-hover-bg:var(--seki-accent);--seki-button-outline-hover-text:var(--seki-accent-foreground);--seki-button-outline-hover-border:var(--seki-input);--seki-button-ghost-bg:transparent;--seki-button-ghost-text:var(--seki-foreground);--seki-button-ghost-border:transparent;--seki-button-ghost-hover-bg:var(--seki-accent);--seki-button-ghost-hover-text:var(--seki-accent-foreground);--seki-button-ghost-hover-border:transparent;--seki-button-destructive-bg:var(--seki-destructive);--seki-button-destructive-text:var(--seki-destructive-foreground);--seki-button-destructive-border:transparent;--seki-button-destructive-hover-bg:hsl(0, 84.2%, 60.2%, 0.9);--seki-button-destructive-hover-border:transparent;--seki-button-sm-padding-x:var(--seki-spacing-3, 0.75rem);--seki-button-sm-padding-y:0.375rem;--seki-button-sm-font-size:var(--seki-text-sm, 0.875rem);--seki-button-sm-height:2.25rem;--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:2rem;--seki-button-lg-padding-y:0.5rem;--seki-button-lg-font-size:1rem;--seki-button-lg-height:2.75rem;--seki-button-icon-sm-size:2rem;--seki-button-icon-size:2.5rem;--seki-button-icon-lg-size:3rem;--seki-button-icon-gap:0.5rem;--seki-button-link-bg:transparent;--seki-button-link-text:var(--seki-primary);--seki-button-link-border:transparent;--seki-button-link-hover-bg:transparent;--seki-button-link-hover-text:var(--seki-primary);--seki-button-link-hover-border:transparent;--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{box-sizing:border-box;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),\n text-decoration var(--seki-button-transition-duration) var(--seki-button-transition-timing);box-shadow:var(--seki-button-shadow);display:inline-flex;align-items:center;justify-content:center;gap:var(--seki-button-icon-gap)}.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);color:var(--seki-button-primary-hover-text, var(--seki-button-primary-text));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);color:var(--seki-button-secondary-hover-text, var(--seki-button-secondary-text));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);color:var(--seki-button-ghost-hover-text);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);color:var(--seki-button-destructive-text);border-color:var(--seki-button-destructive-hover-border)}.button--link{background:var(--seki-button-link-bg);color:var(--seki-button-link-text);border-color:var(--seki-button-link-border);text-decoration:none}.button--link:hover:not(:disabled){background:var(--seki-button-link-hover-bg);color:var(--seki-button-link-hover-text);border-color:var(--seki-button-link-hover-border);text-decoration:underline}.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)}.button--icon-sm{width:var(--seki-button-icon-sm-size);height:var(--seki-button-icon-sm-size);padding:0}.button--icon{width:var(--seki-button-icon-size);height:var(--seki-button-icon-size);padding:0}.button--icon-lg{width:var(--seki-button-icon-lg-size);height:var(--seki-button-icon-lg-size);padding:0}@media (prefers-reduced-motion: reduce){.button{transition:none}}";
5
+ const sekiButtonCss = ":root{--seki-neutral-50:hsl(0, 0%, 98%);--seki-neutral-100:hsl(0, 0%, 96.1%);--seki-neutral-200:hsl(0, 0%, 89.8%);--seki-neutral-300:hsl(0, 0%, 83.1%);--seki-neutral-400:hsl(0, 0%, 63.9%);--seki-neutral-500:hsl(0, 0%, 45.1%);--seki-neutral-600:hsl(0, 0%, 32.2%);--seki-neutral-700:hsl(0, 0%, 25.1%);--seki-neutral-800:hsl(0, 0%, 14.9%);--seki-neutral-900:hsl(0, 0%, 9%);--seki-neutral-950:hsl(0, 0%, 3.9%);--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, 84.2%, 60.2%);--seki-destructive-600:hsl(0, 72%, 41%)}:root{--seki-background:hsl(0, 0%, 100%);--seki-foreground:hsl(0, 0%, 3.9%);--seki-muted:hsl(0, 0%, 96.1%);--seki-muted-foreground:hsl(0, 0%, 45.1%);--seki-card:hsl(0, 0%, 100%);--seki-card-foreground:hsl(0, 0%, 3.9%);--seki-popover:hsl(0, 0%, 100%);--seki-popover-foreground:hsl(0, 0%, 3.9%);--seki-border:hsl(0, 0%, 89.8%);--seki-input:hsl(0, 0%, 89.8%);--seki-primary:hsl(0, 0%, 9%);--seki-primary-foreground:hsl(0, 0%, 98%);--seki-secondary:hsl(0, 0%, 96.1%);--seki-secondary-foreground:hsl(0, 0%, 9%);--seki-accent:hsl(0, 0%, 96.1%);--seki-accent-foreground:hsl(0, 0%, 9%);--seki-destructive:hsl(0, 84.2%, 60.2%);--seki-destructive-foreground:hsl(0, 0%, 98%);--seki-ring:hsl(0, 0%, 3.9%);--seki-bg-primary:var(--seki-background);--seki-bg-secondary:var(--seki-muted);--seki-bg-tertiary:var(--seki-accent);--seki-text-primary:var(--seki-foreground);--seki-text-secondary:var(--seki-muted-foreground);--seki-text-tertiary:var(--seki-neutral-400);--seki-border-default:var(--seki-border);--seki-border-emphasis:var(--seki-neutral-300)}:root[data-theme='dark']{--seki-background:hsl(0, 0%, 3.9%);--seki-foreground:hsl(0, 0%, 98%);--seki-muted:hsl(0, 0%, 14.9%);--seki-muted-foreground:hsl(0, 0%, 63.9%);--seki-card:hsl(0, 0%, 3.9%);--seki-card-foreground:hsl(0, 0%, 98%);--seki-popover:hsl(0, 0%, 3.9%);--seki-popover-foreground:hsl(0, 0%, 98%);--seki-border:hsl(0, 0%, 14.9%);--seki-input:hsl(0, 0%, 14.9%);--seki-primary:hsl(0, 0%, 98%);--seki-primary-foreground:hsl(0, 0%, 9%);--seki-secondary:hsl(0, 0%, 14.9%);--seki-secondary-foreground:hsl(0, 0%, 98%);--seki-accent:hsl(0, 0%, 14.9%);--seki-accent-foreground:hsl(0, 0%, 98%);--seki-destructive:hsl(0, 62.8%, 30.6%);--seki-destructive-foreground:hsl(0, 0%, 98%);--seki-ring:hsl(0, 0%, 83.1%);--seki-bg-primary:var(--seki-background);--seki-bg-secondary:var(--seki-muted);--seki-bg-tertiary:var(--seki-accent);--seki-text-primary:var(--seki-foreground);--seki-text-secondary:var(--seki-muted-foreground);--seki-text-tertiary:var(--seki-neutral-600);--seki-border-default:var(--seki-border);--seki-border-emphasis:var(--seki-neutral-700);--seki-button-primary-hover-bg:hsl(0, 0%, 98%, 0.9);--seki-button-secondary-hover-bg:hsl(0, 0%, 14.9%, 0.8)}:root{--seki-button-primary-bg:var(--seki-primary);--seki-button-primary-text:var(--seki-primary-foreground);--seki-button-primary-border:transparent;--seki-button-primary-hover-bg:hsl(0, 0%, 9%, 0.9);--seki-button-primary-hover-text:var(--seki-primary-foreground);--seki-button-primary-hover-border:transparent;--seki-button-secondary-bg:var(--seki-secondary);--seki-button-secondary-text:var(--seki-secondary-foreground);--seki-button-secondary-border:transparent;--seki-button-secondary-hover-bg:hsl(0, 0%, 96.1%, 0.8);--seki-button-secondary-hover-text:var(--seki-secondary-foreground);--seki-button-secondary-hover-border:transparent;--seki-button-outline-bg:transparent;--seki-button-outline-text:var(--seki-foreground);--seki-button-outline-border:var(--seki-input);--seki-button-outline-hover-bg:var(--seki-accent);--seki-button-outline-hover-text:var(--seki-accent-foreground);--seki-button-outline-hover-border:var(--seki-input);--seki-button-ghost-bg:transparent;--seki-button-ghost-text:var(--seki-foreground);--seki-button-ghost-border:transparent;--seki-button-ghost-hover-bg:var(--seki-accent);--seki-button-ghost-hover-text:var(--seki-accent-foreground);--seki-button-ghost-hover-border:transparent;--seki-button-destructive-bg:var(--seki-destructive);--seki-button-destructive-text:var(--seki-destructive-foreground);--seki-button-destructive-border:transparent;--seki-button-destructive-hover-bg:hsl(0, 84.2%, 60.2%, 0.9);--seki-button-destructive-hover-border:transparent;--seki-button-sm-padding-x:var(--seki-spacing-3, 0.75rem);--seki-button-sm-padding-y:0.375rem;--seki-button-sm-font-size:var(--seki-text-sm, 0.875rem);--seki-button-sm-height:2.25rem;--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:2rem;--seki-button-lg-padding-y:0.5rem;--seki-button-lg-font-size:1rem;--seki-button-lg-height:2.75rem;--seki-button-icon-sm-size:2rem;--seki-button-icon-size:2.5rem;--seki-button-icon-lg-size:3rem;--seki-button-icon-gap:0.5rem;--seki-button-link-bg:transparent;--seki-button-link-text:var(--seki-primary);--seki-button-link-border:transparent;--seki-button-link-hover-bg:transparent;--seki-button-link-hover-text:var(--seki-primary);--seki-button-link-hover-border:transparent;--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;--seki-input-bg:var(--seki-background);--seki-input-border:var(--seki-border);--seki-input-text:var(--seki-foreground);--seki-input-placeholder:var(--seki-muted-foreground);--seki-input-ring:var(--seki-ring);--seki-input-invalid-border:var(--seki-destructive);--seki-input-invalid-ring:var(--seki-destructive);--seki-input-disabled-opacity:0.5;--seki-input-radius:var(--seki-radius-md)}: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;--seki-input-height-sm:2rem;--seki-input-height-md:2.5rem;--seki-input-height-lg:3rem;--seki-input-padding-x:0.75rem;--seki-input-padding-y:0.5rem;--seki-input-font-size:0.875rem;--seki-input-ring-offset:2px}: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{box-sizing:border-box;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),\n text-decoration var(--seki-button-transition-duration) var(--seki-button-transition-timing);box-shadow:var(--seki-button-shadow);display:inline-flex;align-items:center;justify-content:center;gap:var(--seki-button-icon-gap)}.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);color:var(--seki-button-primary-hover-text, var(--seki-button-primary-text));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);color:var(--seki-button-secondary-hover-text, var(--seki-button-secondary-text));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);color:var(--seki-button-ghost-hover-text);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);color:var(--seki-button-destructive-text);border-color:var(--seki-button-destructive-hover-border)}.button--link{background:var(--seki-button-link-bg);color:var(--seki-button-link-text);border-color:var(--seki-button-link-border);text-decoration:none}.button--link:hover:not(:disabled){background:var(--seki-button-link-hover-bg);color:var(--seki-button-link-hover-text);border-color:var(--seki-button-link-hover-border);text-decoration:underline}.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)}.button--icon-sm{width:var(--seki-button-icon-sm-size);height:var(--seki-button-icon-sm-size);padding:0}.button--icon{width:var(--seki-button-icon-size);height:var(--seki-button-icon-size);padding:0}.button--icon-lg{width:var(--seki-button-icon-lg-size);height:var(--seki-button-icon-lg-size);padding:0}@media (prefers-reduced-motion: reduce){.button{transition:none}}";
6
6
 
7
7
  const SekiButton = class {
8
8
  constructor(hostRef) {
@@ -0,0 +1,66 @@
1
+ 'use strict';
2
+
3
+ var index = require('./index-B1pILoQg.js');
4
+
5
+ const sekiInputCss = ":root{--seki-neutral-50:hsl(0, 0%, 98%);--seki-neutral-100:hsl(0, 0%, 96.1%);--seki-neutral-200:hsl(0, 0%, 89.8%);--seki-neutral-300:hsl(0, 0%, 83.1%);--seki-neutral-400:hsl(0, 0%, 63.9%);--seki-neutral-500:hsl(0, 0%, 45.1%);--seki-neutral-600:hsl(0, 0%, 32.2%);--seki-neutral-700:hsl(0, 0%, 25.1%);--seki-neutral-800:hsl(0, 0%, 14.9%);--seki-neutral-900:hsl(0, 0%, 9%);--seki-neutral-950:hsl(0, 0%, 3.9%);--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, 84.2%, 60.2%);--seki-destructive-600:hsl(0, 72%, 41%)}:root{--seki-background:hsl(0, 0%, 100%);--seki-foreground:hsl(0, 0%, 3.9%);--seki-muted:hsl(0, 0%, 96.1%);--seki-muted-foreground:hsl(0, 0%, 45.1%);--seki-card:hsl(0, 0%, 100%);--seki-card-foreground:hsl(0, 0%, 3.9%);--seki-popover:hsl(0, 0%, 100%);--seki-popover-foreground:hsl(0, 0%, 3.9%);--seki-border:hsl(0, 0%, 89.8%);--seki-input:hsl(0, 0%, 89.8%);--seki-primary:hsl(0, 0%, 9%);--seki-primary-foreground:hsl(0, 0%, 98%);--seki-secondary:hsl(0, 0%, 96.1%);--seki-secondary-foreground:hsl(0, 0%, 9%);--seki-accent:hsl(0, 0%, 96.1%);--seki-accent-foreground:hsl(0, 0%, 9%);--seki-destructive:hsl(0, 84.2%, 60.2%);--seki-destructive-foreground:hsl(0, 0%, 98%);--seki-ring:hsl(0, 0%, 3.9%);--seki-bg-primary:var(--seki-background);--seki-bg-secondary:var(--seki-muted);--seki-bg-tertiary:var(--seki-accent);--seki-text-primary:var(--seki-foreground);--seki-text-secondary:var(--seki-muted-foreground);--seki-text-tertiary:var(--seki-neutral-400);--seki-border-default:var(--seki-border);--seki-border-emphasis:var(--seki-neutral-300)}:root[data-theme='dark']{--seki-background:hsl(0, 0%, 3.9%);--seki-foreground:hsl(0, 0%, 98%);--seki-muted:hsl(0, 0%, 14.9%);--seki-muted-foreground:hsl(0, 0%, 63.9%);--seki-card:hsl(0, 0%, 3.9%);--seki-card-foreground:hsl(0, 0%, 98%);--seki-popover:hsl(0, 0%, 3.9%);--seki-popover-foreground:hsl(0, 0%, 98%);--seki-border:hsl(0, 0%, 14.9%);--seki-input:hsl(0, 0%, 14.9%);--seki-primary:hsl(0, 0%, 98%);--seki-primary-foreground:hsl(0, 0%, 9%);--seki-secondary:hsl(0, 0%, 14.9%);--seki-secondary-foreground:hsl(0, 0%, 98%);--seki-accent:hsl(0, 0%, 14.9%);--seki-accent-foreground:hsl(0, 0%, 98%);--seki-destructive:hsl(0, 62.8%, 30.6%);--seki-destructive-foreground:hsl(0, 0%, 98%);--seki-ring:hsl(0, 0%, 83.1%);--seki-bg-primary:var(--seki-background);--seki-bg-secondary:var(--seki-muted);--seki-bg-tertiary:var(--seki-accent);--seki-text-primary:var(--seki-foreground);--seki-text-secondary:var(--seki-muted-foreground);--seki-text-tertiary:var(--seki-neutral-600);--seki-border-default:var(--seki-border);--seki-border-emphasis:var(--seki-neutral-700);--seki-button-primary-hover-bg:hsl(0, 0%, 98%, 0.9);--seki-button-secondary-hover-bg:hsl(0, 0%, 14.9%, 0.8)}:root{--seki-button-primary-bg:var(--seki-primary);--seki-button-primary-text:var(--seki-primary-foreground);--seki-button-primary-border:transparent;--seki-button-primary-hover-bg:hsl(0, 0%, 9%, 0.9);--seki-button-primary-hover-text:var(--seki-primary-foreground);--seki-button-primary-hover-border:transparent;--seki-button-secondary-bg:var(--seki-secondary);--seki-button-secondary-text:var(--seki-secondary-foreground);--seki-button-secondary-border:transparent;--seki-button-secondary-hover-bg:hsl(0, 0%, 96.1%, 0.8);--seki-button-secondary-hover-text:var(--seki-secondary-foreground);--seki-button-secondary-hover-border:transparent;--seki-button-outline-bg:transparent;--seki-button-outline-text:var(--seki-foreground);--seki-button-outline-border:var(--seki-input);--seki-button-outline-hover-bg:var(--seki-accent);--seki-button-outline-hover-text:var(--seki-accent-foreground);--seki-button-outline-hover-border:var(--seki-input);--seki-button-ghost-bg:transparent;--seki-button-ghost-text:var(--seki-foreground);--seki-button-ghost-border:transparent;--seki-button-ghost-hover-bg:var(--seki-accent);--seki-button-ghost-hover-text:var(--seki-accent-foreground);--seki-button-ghost-hover-border:transparent;--seki-button-destructive-bg:var(--seki-destructive);--seki-button-destructive-text:var(--seki-destructive-foreground);--seki-button-destructive-border:transparent;--seki-button-destructive-hover-bg:hsl(0, 84.2%, 60.2%, 0.9);--seki-button-destructive-hover-border:transparent;--seki-button-sm-padding-x:var(--seki-spacing-3, 0.75rem);--seki-button-sm-padding-y:0.375rem;--seki-button-sm-font-size:var(--seki-text-sm, 0.875rem);--seki-button-sm-height:2.25rem;--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:2rem;--seki-button-lg-padding-y:0.5rem;--seki-button-lg-font-size:1rem;--seki-button-lg-height:2.75rem;--seki-button-icon-sm-size:2rem;--seki-button-icon-size:2.5rem;--seki-button-icon-lg-size:3rem;--seki-button-icon-gap:0.5rem;--seki-button-link-bg:transparent;--seki-button-link-text:var(--seki-primary);--seki-button-link-border:transparent;--seki-button-link-hover-bg:transparent;--seki-button-link-hover-text:var(--seki-primary);--seki-button-link-hover-border:transparent;--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;--seki-input-bg:var(--seki-background);--seki-input-border:var(--seki-border);--seki-input-text:var(--seki-foreground);--seki-input-placeholder:var(--seki-muted-foreground);--seki-input-ring:var(--seki-ring);--seki-input-invalid-border:var(--seki-destructive);--seki-input-invalid-ring:var(--seki-destructive);--seki-input-disabled-opacity:0.5;--seki-input-radius:var(--seki-radius-md)}: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;--seki-input-height-sm:2rem;--seki-input-height-md:2.5rem;--seki-input-height-lg:3rem;--seki-input-padding-x:0.75rem;--seki-input-padding-y:0.5rem;--seki-input-font-size:0.875rem;--seki-input-ring-offset:2px}: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;width:100%}.input{box-sizing:border-box;width:100%;font-family:var(--seki-font-sans);font-size:var(--seki-input-font-size);border-radius:var(--seki-input-radius);border:1px solid var(--seki-input-border);background:var(--seki-input-bg);color:var(--seki-input-text);padding:var(--seki-input-padding-y) var(--seki-input-padding-x);transition:border-color 0.2s ease, box-shadow 0.2s ease}.input::placeholder{color:var(--seki-input-placeholder)}.input:focus-visible{outline:2px solid var(--seki-input-ring);outline-offset:var(--seki-input-ring-offset);border-color:var(--seki-input-ring)}.input:disabled{cursor:not-allowed;opacity:var(--seki-input-disabled-opacity)}.input:read-only{background:var(--seki-muted)}.input--invalid{border-color:var(--seki-input-invalid-border)}.input--invalid:focus-visible{outline-color:var(--seki-input-invalid-ring);border-color:var(--seki-input-invalid-border)}.input--sm{height:var(--seki-input-height-sm);font-size:calc(var(--seki-input-font-size) * 0.875);padding:calc(var(--seki-input-padding-y) * 0.75) calc(var(--seki-input-padding-x) * 0.875)}.input--md{height:var(--seki-input-height-md)}.input--lg{height:var(--seki-input-height-lg);font-size:calc(var(--seki-input-font-size) * 1.125);padding:calc(var(--seki-input-padding-y) * 1.25) calc(var(--seki-input-padding-x) * 1.125)}.input[type=\"file\"]::file-selector-button{border:0;background:transparent;font-size:var(--seki-input-font-size);font-weight:500;margin-right:0.75rem;cursor:pointer;color:var(--seki-input-text)}.input[type=\"file\"]::file-selector-button:hover{text-decoration:underline}@media (prefers-reduced-motion: reduce){.input{transition:none}}";
6
+
7
+ const SekiInput = class {
8
+ constructor(hostRef) {
9
+ index.registerInstance(this, hostRef);
10
+ this.sekiInput = index.createEvent(this, "sekiInput");
11
+ this.sekiChange = index.createEvent(this, "sekiChange");
12
+ this.sekiFocus = index.createEvent(this, "sekiFocus");
13
+ this.sekiBlur = index.createEvent(this, "sekiBlur");
14
+ /**
15
+ * Input type (text, email, password, number, tel, url, date, file, etc.)
16
+ */
17
+ this.type = 'text';
18
+ /**
19
+ * Current value of the input
20
+ */
21
+ this.value = '';
22
+ /**
23
+ * Whether the input is disabled
24
+ */
25
+ this.disabled = false;
26
+ /**
27
+ * Whether the input is readonly
28
+ */
29
+ this.readonly = false;
30
+ /**
31
+ * Whether the input is required
32
+ */
33
+ this.required = false;
34
+ /**
35
+ * Size variant
36
+ */
37
+ this.size = 'md';
38
+ /**
39
+ * Whether the input is in an invalid/error state
40
+ */
41
+ this.invalid = false;
42
+ this.handleInput = (event) => {
43
+ const target = event.target;
44
+ this.value = target.value;
45
+ this.sekiInput.emit({ value: this.value, nativeEvent: event });
46
+ };
47
+ this.handleChange = (event) => {
48
+ const target = event.target;
49
+ this.value = target.value;
50
+ this.sekiChange.emit({ value: this.value, nativeEvent: event });
51
+ };
52
+ this.handleFocus = (event) => {
53
+ this.sekiFocus.emit({ nativeEvent: event });
54
+ };
55
+ this.handleBlur = (event) => {
56
+ const target = event.target;
57
+ this.sekiBlur.emit({ value: target.value, nativeEvent: event });
58
+ };
59
+ }
60
+ render() {
61
+ return (index.h("input", { key: 'ee1a78a2e143eabec329263670723cee7fa5bd86', type: this.type, value: this.value, placeholder: this.placeholder, disabled: this.disabled, readOnly: this.readonly, required: this.required, name: this.name, autocomplete: this.autocomplete, min: this.min, max: this.max, step: this.step, pattern: this.pattern, minlength: this.minlength, maxlength: this.maxlength, class: `input input--${this.size}${this.invalid ? ' input--invalid' : ''}`, "aria-label": this.ariaLabel, "aria-describedby": this.ariaDescribedby, "aria-invalid": this.invalid ? 'true' : null, "aria-disabled": this.disabled ? 'true' : null, onInput: this.handleInput, onChange: this.handleChange, onFocus: this.handleFocus, onBlur: this.handleBlur }));
62
+ }
63
+ };
64
+ SekiInput.style = sekiInputCss;
65
+
66
+ exports.seki_input = SekiInput;
@@ -0,0 +1,25 @@
1
+ 'use strict';
2
+
3
+ var index = require('./index-B1pILoQg.js');
4
+
5
+ const sekiSkeletonCss = ":root{--seki-neutral-50:hsl(0, 0%, 98%);--seki-neutral-100:hsl(0, 0%, 96.1%);--seki-neutral-200:hsl(0, 0%, 89.8%);--seki-neutral-300:hsl(0, 0%, 83.1%);--seki-neutral-400:hsl(0, 0%, 63.9%);--seki-neutral-500:hsl(0, 0%, 45.1%);--seki-neutral-600:hsl(0, 0%, 32.2%);--seki-neutral-700:hsl(0, 0%, 25.1%);--seki-neutral-800:hsl(0, 0%, 14.9%);--seki-neutral-900:hsl(0, 0%, 9%);--seki-neutral-950:hsl(0, 0%, 3.9%);--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, 84.2%, 60.2%);--seki-destructive-600:hsl(0, 72%, 41%)}:root{--seki-background:hsl(0, 0%, 100%);--seki-foreground:hsl(0, 0%, 3.9%);--seki-muted:hsl(0, 0%, 96.1%);--seki-muted-foreground:hsl(0, 0%, 45.1%);--seki-card:hsl(0, 0%, 100%);--seki-card-foreground:hsl(0, 0%, 3.9%);--seki-popover:hsl(0, 0%, 100%);--seki-popover-foreground:hsl(0, 0%, 3.9%);--seki-border:hsl(0, 0%, 89.8%);--seki-input:hsl(0, 0%, 89.8%);--seki-primary:hsl(0, 0%, 9%);--seki-primary-foreground:hsl(0, 0%, 98%);--seki-secondary:hsl(0, 0%, 96.1%);--seki-secondary-foreground:hsl(0, 0%, 9%);--seki-accent:hsl(0, 0%, 96.1%);--seki-accent-foreground:hsl(0, 0%, 9%);--seki-destructive:hsl(0, 84.2%, 60.2%);--seki-destructive-foreground:hsl(0, 0%, 98%);--seki-ring:hsl(0, 0%, 3.9%);--seki-bg-primary:var(--seki-background);--seki-bg-secondary:var(--seki-muted);--seki-bg-tertiary:var(--seki-accent);--seki-text-primary:var(--seki-foreground);--seki-text-secondary:var(--seki-muted-foreground);--seki-text-tertiary:var(--seki-neutral-400);--seki-border-default:var(--seki-border);--seki-border-emphasis:var(--seki-neutral-300)}:root[data-theme='dark']{--seki-background:hsl(0, 0%, 3.9%);--seki-foreground:hsl(0, 0%, 98%);--seki-muted:hsl(0, 0%, 14.9%);--seki-muted-foreground:hsl(0, 0%, 63.9%);--seki-card:hsl(0, 0%, 3.9%);--seki-card-foreground:hsl(0, 0%, 98%);--seki-popover:hsl(0, 0%, 3.9%);--seki-popover-foreground:hsl(0, 0%, 98%);--seki-border:hsl(0, 0%, 14.9%);--seki-input:hsl(0, 0%, 14.9%);--seki-primary:hsl(0, 0%, 98%);--seki-primary-foreground:hsl(0, 0%, 9%);--seki-secondary:hsl(0, 0%, 14.9%);--seki-secondary-foreground:hsl(0, 0%, 98%);--seki-accent:hsl(0, 0%, 14.9%);--seki-accent-foreground:hsl(0, 0%, 98%);--seki-destructive:hsl(0, 62.8%, 30.6%);--seki-destructive-foreground:hsl(0, 0%, 98%);--seki-ring:hsl(0, 0%, 83.1%);--seki-bg-primary:var(--seki-background);--seki-bg-secondary:var(--seki-muted);--seki-bg-tertiary:var(--seki-accent);--seki-text-primary:var(--seki-foreground);--seki-text-secondary:var(--seki-muted-foreground);--seki-text-tertiary:var(--seki-neutral-600);--seki-border-default:var(--seki-border);--seki-border-emphasis:var(--seki-neutral-700);--seki-button-primary-hover-bg:hsl(0, 0%, 98%, 0.9);--seki-button-secondary-hover-bg:hsl(0, 0%, 14.9%, 0.8)}:root{--seki-button-primary-bg:var(--seki-primary);--seki-button-primary-text:var(--seki-primary-foreground);--seki-button-primary-border:transparent;--seki-button-primary-hover-bg:hsl(0, 0%, 9%, 0.9);--seki-button-primary-hover-text:var(--seki-primary-foreground);--seki-button-primary-hover-border:transparent;--seki-button-secondary-bg:var(--seki-secondary);--seki-button-secondary-text:var(--seki-secondary-foreground);--seki-button-secondary-border:transparent;--seki-button-secondary-hover-bg:hsl(0, 0%, 96.1%, 0.8);--seki-button-secondary-hover-text:var(--seki-secondary-foreground);--seki-button-secondary-hover-border:transparent;--seki-button-outline-bg:transparent;--seki-button-outline-text:var(--seki-foreground);--seki-button-outline-border:var(--seki-input);--seki-button-outline-hover-bg:var(--seki-accent);--seki-button-outline-hover-text:var(--seki-accent-foreground);--seki-button-outline-hover-border:var(--seki-input);--seki-button-ghost-bg:transparent;--seki-button-ghost-text:var(--seki-foreground);--seki-button-ghost-border:transparent;--seki-button-ghost-hover-bg:var(--seki-accent);--seki-button-ghost-hover-text:var(--seki-accent-foreground);--seki-button-ghost-hover-border:transparent;--seki-button-destructive-bg:var(--seki-destructive);--seki-button-destructive-text:var(--seki-destructive-foreground);--seki-button-destructive-border:transparent;--seki-button-destructive-hover-bg:hsl(0, 84.2%, 60.2%, 0.9);--seki-button-destructive-hover-border:transparent;--seki-button-sm-padding-x:var(--seki-spacing-3, 0.75rem);--seki-button-sm-padding-y:0.375rem;--seki-button-sm-font-size:var(--seki-text-sm, 0.875rem);--seki-button-sm-height:2.25rem;--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:2rem;--seki-button-lg-padding-y:0.5rem;--seki-button-lg-font-size:1rem;--seki-button-lg-height:2.75rem;--seki-button-icon-sm-size:2rem;--seki-button-icon-size:2.5rem;--seki-button-icon-lg-size:3rem;--seki-button-icon-gap:0.5rem;--seki-button-link-bg:transparent;--seki-button-link-text:var(--seki-primary);--seki-button-link-border:transparent;--seki-button-link-hover-bg:transparent;--seki-button-link-hover-text:var(--seki-primary);--seki-button-link-hover-border:transparent;--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;--seki-input-bg:var(--seki-background);--seki-input-border:var(--seki-border);--seki-input-text:var(--seki-foreground);--seki-input-placeholder:var(--seki-muted-foreground);--seki-input-ring:var(--seki-ring);--seki-input-invalid-border:var(--seki-destructive);--seki-input-invalid-ring:var(--seki-destructive);--seki-input-disabled-opacity:0.5;--seki-input-radius:var(--seki-radius-md)}: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;--seki-input-height-sm:2rem;--seki-input-height-md:2.5rem;--seki-input-height-lg:3rem;--seki-input-padding-x:0.75rem;--seki-input-padding-y:0.5rem;--seki-input-font-size:0.875rem;--seki-input-ring-offset:2px}: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}.skeleton{background-color:var(--seki-muted);border-radius:var(--seki-radius-md, 0.375rem);width:100%;height:100%;animation:skeleton-pulse 2s ease-in-out infinite}@keyframes skeleton-pulse{0%,100%{opacity:1}50%{opacity:0.5}}@media (prefers-reduced-motion: reduce){.skeleton{animation:none}}";
6
+
7
+ const SekiSkeleton = class {
8
+ constructor(hostRef) {
9
+ index.registerInstance(this, hostRef);
10
+ }
11
+ componentWillLoad() {
12
+ // Dev mode warning for excessively long aria-label
13
+ if (this.ariaLabel && this.ariaLabel.length > 200) {
14
+ console.warn(`[seki-skeleton] aria-label is ${this.ariaLabel.length} characters long. ` +
15
+ `Screen readers may truncate labels over 200 characters. ` +
16
+ `Consider using a shorter, more concise label.`);
17
+ }
18
+ }
19
+ render() {
20
+ return (index.h("div", { key: '05a380c08ba027ce88851c6d67beea12588f8e3a', class: "skeleton", part: "skeleton", role: "status", "aria-busy": "true", "aria-label": this.ariaLabel || undefined }));
21
+ }
22
+ };
23
+ SekiSkeleton.style = sekiSkeletonCss;
24
+
25
+ exports.seki_skeleton = SekiSkeleton;
@@ -1,6 +1,6 @@
1
1
  'use strict';
2
2
 
3
- var index = require('./index-6jIfEFyf.js');
3
+ var index = require('./index-B1pILoQg.js');
4
4
  var appGlobals = require('./app-globals-V2Kpy_OQ.js');
5
5
 
6
6
  var _documentCurrentScript = typeof document !== 'undefined' ? document.currentScript : null;
@@ -19,7 +19,7 @@ var patchBrowser = () => {
19
19
 
20
20
  patchBrowser().then(async (options) => {
21
21
  await appGlobals.globalScripts();
22
- return index.bootstrapLazy([["seki-button.cjs",[[257,"seki-button",{"variant":[1],"size":[1],"disabled":[4],"type":[1],"ariaLabel":[1,"aria-label"]}]]]], options);
22
+ return index.bootstrapLazy([["seki-button.cjs",[[257,"seki-button",{"variant":[1],"size":[1],"disabled":[4],"type":[1],"ariaLabel":[1,"aria-label"]}]]],["seki-input.cjs",[[257,"seki-input",{"type":[1],"value":[1537],"placeholder":[1],"disabled":[4],"readonly":[4],"required":[4],"name":[1],"autocomplete":[1],"min":[8],"max":[8],"step":[8],"pattern":[1],"minlength":[2],"maxlength":[2],"size":[1],"invalid":[4],"ariaLabel":[1,"aria-label"],"ariaDescribedby":[1,"aria-describedby"]}]]],["seki-skeleton.cjs",[[257,"seki-skeleton",{"ariaLabel":[1,"aria-label"]}]]]], options);
23
23
  });
24
24
 
25
25
  exports.setNonce = index.setNonce;
@@ -1,6 +1,8 @@
1
1
  {
2
2
  "entries": [
3
- "components/button/seki-button.js"
3
+ "components/button/seki-button.js",
4
+ "components/input/seki-input.js",
5
+ "components/skeleton/seki-skeleton.js"
4
6
  ],
5
7
  "compiler": {
6
8
  "name": "@stencil/core",