@sekiui/elements 0.0.53 → 0.0.55
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.
- package/dist/cdn/index.js +1 -1
- package/dist/cdn/seki-button.js +1 -1
- package/dist/cdn/seki-field-description.js +1 -1
- package/dist/cdn/seki-field-error.js +1 -1
- package/dist/cdn/seki-field-group.js +1 -1
- package/dist/cdn/seki-field-label.js +1 -1
- package/dist/cdn/seki-field-legend.js +1 -1
- package/dist/cdn/seki-field.js +1 -1
- package/dist/cdn/seki-fieldset.js +1 -1
- package/dist/cdn/seki-input.js +1 -1
- package/dist/cdn/seki-select-group.js +1 -1
- package/dist/cdn/seki-select-option.js +1 -1
- package/dist/cdn/seki-select.js +1 -1
- package/dist/cdn/seki-skeleton.js +1 -1
- package/dist/cdn/seki-tooltip.d.ts +11 -0
- package/dist/cdn/seki-tooltip.js +378 -0
- package/dist/cjs/index.cjs.js +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/seki-button.cjs.entry.js +1 -1
- package/dist/cjs/seki-field-description.cjs.entry.js +1 -1
- package/dist/cjs/seki-field-error.cjs.entry.js +1 -1
- package/dist/cjs/seki-field-group.cjs.entry.js +1 -1
- package/dist/cjs/seki-field-label.cjs.entry.js +1 -1
- package/dist/cjs/seki-field-legend.cjs.entry.js +1 -1
- package/dist/cjs/seki-field.cjs.entry.js +1 -1
- package/dist/cjs/seki-fieldset.cjs.entry.js +1 -1
- package/dist/cjs/seki-input.cjs.entry.js +1 -1
- package/dist/cjs/seki-select-group.cjs.entry.js +1 -1
- package/dist/cjs/seki-select-option.cjs.entry.js +1 -1
- package/dist/cjs/seki-select.cjs.entry.js +1 -1
- package/dist/cjs/seki-skeleton.cjs.entry.js +1 -1
- package/dist/cjs/seki-tooltip.cjs.entry.js +349 -0
- package/dist/cjs/sekiui.cjs.js +1 -1
- package/dist/collection/collection-manifest.json +1 -0
- package/dist/collection/components/button/seki-button.js +1 -1
- package/dist/collection/components/field/seki-field.js +1 -1
- package/dist/collection/components/field-description/seki-field-description.js +1 -1
- package/dist/collection/components/field-error/seki-field-error.js +1 -1
- package/dist/collection/components/field-group/seki-field-group.js +1 -1
- package/dist/collection/components/field-label/seki-field-label.js +1 -1
- package/dist/collection/components/field-legend/seki-field-legend.js +1 -1
- package/dist/collection/components/fieldset/seki-fieldset.js +1 -1
- package/dist/collection/components/input/seki-input.js +1 -1
- package/dist/collection/components/select/seki-select.js +1 -1
- package/dist/collection/components/select-group/seki-select-group.js +1 -1
- package/dist/collection/components/select-option/seki-select-option.js +1 -1
- package/dist/collection/components/skeleton/seki-skeleton.js +1 -1
- package/dist/collection/components/switch/seki-switch.js +1 -1
- package/dist/collection/components/tooltip/seki-tooltip.css +522 -0
- package/dist/collection/components/tooltip/seki-tooltip.js +608 -0
- package/dist/components/index.js +1 -1
- package/dist/components/seki-button.js +1 -1
- package/dist/components/seki-field-description.js +1 -1
- package/dist/components/seki-field-error.js +1 -1
- package/dist/components/seki-field-group.js +1 -1
- package/dist/components/seki-field-label.js +1 -1
- package/dist/components/seki-field-legend.js +1 -1
- package/dist/components/seki-field.js +1 -1
- package/dist/components/seki-fieldset.js +1 -1
- package/dist/components/seki-input.js +1 -1
- package/dist/components/seki-select-group.js +1 -1
- package/dist/components/seki-select-option.js +1 -1
- package/dist/components/seki-select.js +1 -1
- package/dist/components/seki-skeleton.js +1 -1
- package/dist/components/seki-tooltip.d.ts +11 -0
- package/dist/components/seki-tooltip.js +378 -0
- package/dist/esm/index.js +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/esm/seki-button.entry.js +1 -1
- package/dist/esm/seki-field-description.entry.js +1 -1
- package/dist/esm/seki-field-error.entry.js +1 -1
- package/dist/esm/seki-field-group.entry.js +1 -1
- package/dist/esm/seki-field-label.entry.js +1 -1
- package/dist/esm/seki-field-legend.entry.js +1 -1
- package/dist/esm/seki-field.entry.js +1 -1
- package/dist/esm/seki-fieldset.entry.js +1 -1
- package/dist/esm/seki-input.entry.js +1 -1
- package/dist/esm/seki-select-group.entry.js +1 -1
- package/dist/esm/seki-select-option.entry.js +1 -1
- package/dist/esm/seki-select.entry.js +1 -1
- package/dist/esm/seki-skeleton.entry.js +1 -1
- package/dist/esm/seki-tooltip.entry.js +347 -0
- package/dist/esm/sekiui.js +1 -1
- package/dist/sekiui/index.esm.js +1 -1
- package/dist/sekiui/{p-23a61342.entry.js → p-0fba4e2d.entry.js} +1 -1
- package/dist/sekiui/{p-0f64a7dd.entry.js → p-386c00ac.entry.js} +1 -1
- package/dist/sekiui/{p-c878de6d.entry.js → p-431f46a1.entry.js} +1 -1
- package/dist/sekiui/{p-eb19f073.entry.js → p-434be19f.entry.js} +1 -1
- package/dist/sekiui/{p-62236175.entry.js → p-6bde807e.entry.js} +1 -1
- package/dist/sekiui/{p-c93edddc.entry.js → p-6ff91f7f.entry.js} +1 -1
- package/dist/sekiui/{p-4eef5a47.entry.js → p-7c2245be.entry.js} +1 -1
- package/dist/sekiui/{p-aad78e67.entry.js → p-80a41058.entry.js} +1 -1
- package/dist/sekiui/p-81709fc2.entry.js +1 -0
- package/dist/sekiui/{p-5852ad8e.entry.js → p-a36f1ac4.entry.js} +1 -1
- package/dist/sekiui/{p-d7492f49.entry.js → p-a56602b3.entry.js} +1 -1
- package/dist/sekiui/{p-20eb85c9.entry.js → p-bf942ad5.entry.js} +1 -1
- package/dist/sekiui/{p-93d70750.entry.js → p-de4735fb.entry.js} +1 -1
- package/dist/sekiui/{p-0e89720a.entry.js → p-e679d501.entry.js} +1 -1
- package/dist/sekiui/sekiui.esm.js +1 -1
- package/dist/types/components/tooltip/seki-tooltip.d.ts +147 -0
- package/dist/types/components.d.ts +152 -0
- package/package.json +1 -1
package/dist/cdn/index.js
CHANGED
|
@@ -81,7 +81,7 @@ const SekiSwitch = /*@__PURE__*/ proxyCustomElement(class SekiSwitch extends H {
|
|
|
81
81
|
render() {
|
|
82
82
|
const isChecked = this.isChecked;
|
|
83
83
|
const dataState = isChecked ? 'checked' : 'unchecked';
|
|
84
|
-
return (h(Host, { key: '
|
|
84
|
+
return (h(Host, { key: '3046a6647d7cfd10bf9789aa9cf3b7a88b9a3a10', "data-state": dataState, "data-disabled": this.disabled ? '' : null }, h("div", { key: 'cd8423b9f7295e5e3ef9d7e64ead3fe6502386a2', class: "switch", part: "switch", role: "switch", "aria-checked": isChecked ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : undefined, "aria-label": this.ariaLabel || undefined, "aria-required": this.required ? 'true' : undefined, tabindex: this.disabled ? -1 : 0, onClick: this.handleClick }, h("span", { key: '618ab67d5fab80323f64ec0b1b342561be2585b0', class: "thumb", part: "thumb" })), this.name && (h("input", { key: 'd51e9108038b8796175082231ca3ce7e61106f31', type: "checkbox", name: this.name, value: this.value, checked: isChecked, required: this.required, disabled: this.disabled, style: { display: 'none' }, tabindex: -1, "aria-hidden": "true" }))));
|
|
85
85
|
}
|
|
86
86
|
static get style() { return sekiSwitchCss; }
|
|
87
87
|
}, [257, "seki-switch", {
|
package/dist/cdn/seki-button.js
CHANGED
|
@@ -35,7 +35,7 @@ const SekiButton$1 = /*@__PURE__*/ proxyCustomElement(class SekiButton extends H
|
|
|
35
35
|
}
|
|
36
36
|
}
|
|
37
37
|
render() {
|
|
38
|
-
return (h("button", { key: '
|
|
38
|
+
return (h("button", { key: '17841111481259910cd72cdcb861872918c86452', class: `button button--${this.variant} button--${this.size}`, type: this.type, disabled: this.disabled, "aria-disabled": this.disabled ? 'true' : null, "aria-label": this.ariaLabel }, h("slot", { key: '1a4dfb3cb9eb88af7065cd765c0056a93c94ecc1' })));
|
|
39
39
|
}
|
|
40
40
|
static get style() { return sekiButtonCss; }
|
|
41
41
|
}, [257, "seki-button", {
|
|
@@ -37,7 +37,7 @@ const SekiFieldDescription$1 = /*@__PURE__*/ proxyCustomElement(class SekiFieldD
|
|
|
37
37
|
return this.componentId;
|
|
38
38
|
}
|
|
39
39
|
render() {
|
|
40
|
-
return (h("div", { key: '
|
|
40
|
+
return (h("div", { key: '944a6268efe02b6b69725daf7503a9bcf8482f94', id: this.componentId, class: "description" }, h("slot", { key: '900d5afcf9662fe2e8f32acf55b21823389dbb59' })));
|
|
41
41
|
}
|
|
42
42
|
static get style() { return sekiFieldDescriptionCss; }
|
|
43
43
|
}, [257, "seki-field-description", {
|
|
@@ -57,7 +57,7 @@ const SekiFieldError$1 = /*@__PURE__*/ proxyCustomElement(class SekiFieldError e
|
|
|
57
57
|
}
|
|
58
58
|
render() {
|
|
59
59
|
const style = this.visible ? {} : { display: 'none' };
|
|
60
|
-
return (h("div", { key: '
|
|
60
|
+
return (h("div", { key: '23898d8cdf6e79e0710776895ac8a36c06262524', id: this.componentId, class: "error", "aria-live": "polite", style: style }, h("slot", { key: '7c40a36d065602eb635180ed0805bca9216c5015' })));
|
|
61
61
|
}
|
|
62
62
|
static get watchers() { return {
|
|
63
63
|
"visible": ["handleVisibleChange"]
|
|
@@ -19,7 +19,7 @@ const SekiFieldGroup$1 = /*@__PURE__*/ proxyCustomElement(class SekiFieldGroup e
|
|
|
19
19
|
const style = {
|
|
20
20
|
'--seki-field-group-gap': this.gap,
|
|
21
21
|
};
|
|
22
|
-
return (h("div", { key: '
|
|
22
|
+
return (h("div", { key: '32e2881723467de4e83135f38f339bd1334ea19f', class: "field-group", style: style }, h("slot", { key: '3909c9108222772376d916718003600d9d84f10f' })));
|
|
23
23
|
}
|
|
24
24
|
static get style() { return sekiFieldGroupCss; }
|
|
25
25
|
}, [257, "seki-field-group", {
|
|
@@ -17,7 +17,7 @@ const SekiFieldLabel$1 = /*@__PURE__*/ proxyCustomElement(class SekiFieldLabel e
|
|
|
17
17
|
}
|
|
18
18
|
render() {
|
|
19
19
|
const labelProps = this.htmlFor ? { for: this.htmlFor } : {};
|
|
20
|
-
return (h("label", Object.assign({ key: '
|
|
20
|
+
return (h("label", Object.assign({ key: 'c57011f8722920f073fc05ae3b260e581689c43e' }, labelProps), h("slot", { key: '6e807e411376526b20cf66d694766ce11065b734' }), this.required && h("span", { key: '53d676c377fa93c6d41c50856b4db598cf3c2c15', class: "required-indicator" }, " *")));
|
|
21
21
|
}
|
|
22
22
|
static get style() { return sekiFieldLabelCss; }
|
|
23
23
|
}, [257, "seki-field-label", {
|
|
@@ -11,7 +11,7 @@ const SekiFieldLegend$1 = /*@__PURE__*/ proxyCustomElement(class SekiFieldLegend
|
|
|
11
11
|
this.__attachShadow();
|
|
12
12
|
}
|
|
13
13
|
render() {
|
|
14
|
-
return (h("legend", { key: '
|
|
14
|
+
return (h("legend", { key: 'adcc0cb95335522fc66dc791a3cc063d2493c36b' }, h("slot", { key: '90a382f1eac9b23133f8daf927a2163491f09c38' })));
|
|
15
15
|
}
|
|
16
16
|
static get style() { return sekiFieldLegendCss; }
|
|
17
17
|
}, [257, "seki-field-legend"]);
|
package/dist/cdn/seki-field.js
CHANGED
|
@@ -40,7 +40,7 @@ const SekiField$1 = /*@__PURE__*/ proxyCustomElement(class SekiField extends H {
|
|
|
40
40
|
}
|
|
41
41
|
render() {
|
|
42
42
|
const hasMultiple = this.hasMultipleControls();
|
|
43
|
-
return (h(Host, { key: '
|
|
43
|
+
return (h(Host, { key: '7d408fdb23512ed73f2e3b824323299259a9f54e', "data-orientation": this.orientation, "data-invalid": this.invalid ? '' : undefined, role: hasMultiple ? 'group' : undefined }, h("div", { key: 'ed41345dd9f4a215348ada06e18963b0636ff39b', class: "field" }, h("div", { key: '3c47939088ff6daa0b6764e67e041ebfbaae3fe5', class: "field-label" }, h("slot", { key: 'ab1f28345bdf3daf232b0336f2e2dad8e86a4e0d', name: "label" })), h("div", { key: 'f51416218c47263b93401596de55d4dc97a448a3', class: "field-control" }, h("slot", { key: '890e240b0977bea0749f61799d93921404ff1c60' })), h("div", { key: '10c7383951a8c011d1c1453c52ed90009774d1cc', class: "field-description" }, h("slot", { key: 'b704d490e0299e8c9e5a48b8710024d0940cc63f', name: "description" })), h("div", { key: '3e474168ee78566198a27677ddbc489b953cea3e', class: "field-error" }, h("slot", { key: '8bd880c75f7c5044d3c27651bca268b54a42f3df', name: "error" })))));
|
|
44
44
|
}
|
|
45
45
|
get el() { return this; }
|
|
46
46
|
static get style() { return sekiFieldCss; }
|
|
@@ -16,7 +16,7 @@ const SekiFieldset$1 = /*@__PURE__*/ proxyCustomElement(class SekiFieldset exten
|
|
|
16
16
|
this.disabled = false;
|
|
17
17
|
}
|
|
18
18
|
render() {
|
|
19
|
-
return (h("fieldset", { key: '
|
|
19
|
+
return (h("fieldset", { key: '71604f49a136c1bb6c907c8dc3ac669898e663cd', disabled: this.disabled, class: "fieldset" }, h("slot", { key: '8f27126458260cc264b230877b8363290bbbdad3', name: "legend" }), h("div", { key: '04cc5aa90217a824db0150f2ac9a23c0308f5c71', class: "fieldset-content" }, h("slot", { key: 'e6e47348a642909c61fe042ab15e9cb8eb29adee' }))));
|
|
20
20
|
}
|
|
21
21
|
static get style() { return sekiFieldsetCss; }
|
|
22
22
|
}, [257, "seki-fieldset", {
|
package/dist/cdn/seki-input.js
CHANGED
|
@@ -88,7 +88,7 @@ const SekiInput$1 = /*@__PURE__*/ proxyCustomElement(class SekiInput extends H {
|
|
|
88
88
|
}
|
|
89
89
|
}
|
|
90
90
|
render() {
|
|
91
|
-
return (h("input", { key: '
|
|
91
|
+
return (h("input", { key: '8eb8533483c82c21b5beeb53564834e3b12818f3', 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 }));
|
|
92
92
|
}
|
|
93
93
|
static get formAssociated() { return true; }
|
|
94
94
|
static get style() { return sekiInputCss; }
|
|
@@ -15,7 +15,7 @@ const SekiSelectGroup$1 = /*@__PURE__*/ proxyCustomElement(class SekiSelectGroup
|
|
|
15
15
|
// Render
|
|
16
16
|
// ===========================
|
|
17
17
|
render() {
|
|
18
|
-
return (h(Host, { key: '
|
|
18
|
+
return (h(Host, { key: 'eb653182cb7b5abc3cae421b8d2d1e8ac2986711' }, h("div", { key: 'a8d7acb214f068a8e0632a6c351a001f8763c7f4', class: "group", role: "group", "aria-labelledby": this.groupLabelId }, h("div", { key: 'b824a62902fdab61643ec531312cb334c503039c', class: "group-separator", "aria-hidden": "true" }), h("div", { key: 'dd4cb2c630cc3168871bc8341153ed12286a3568', class: "group-label", id: this.groupLabelId, role: "presentation" }, h("slot", { key: '772b976e269f92fd3f4e0bfe3a1e46655fcac9e1', name: "label" }, this.label)), h("div", { key: 'c986fad023b5b3678f8a5aa1fd90eea60c6bb41a', class: "group-options" }, h("slot", { key: 'ae49a1089f894b3a2efe55814b79115eaeb67d7c' })))));
|
|
19
19
|
}
|
|
20
20
|
static get style() { return sekiSelectGroupCss; }
|
|
21
21
|
}, [257, "seki-select-group", {
|
|
@@ -81,7 +81,7 @@ const SekiSelectOption$1 = /*@__PURE__*/ proxyCustomElement(class SekiSelectOpti
|
|
|
81
81
|
const selectContext = this.getSelectContext();
|
|
82
82
|
const isSelected = (selectContext === null || selectContext === void 0 ? void 0 : selectContext.isValueSelected(this.value)) || false;
|
|
83
83
|
const isFocused = (selectContext === null || selectContext === void 0 ? void 0 : selectContext.focusedOptionValue) === this.value;
|
|
84
|
-
return (h(Host, { key: '
|
|
84
|
+
return (h(Host, { key: '368d46b8ceba8e1591986e2c5badadeba25d6d63' }, h("div", { key: 'a222d31554354b845f976c7fda2baae8b1262afb', class: "option", role: "option", id: this.optionId, onClick: this.handleOptionClick, onFocus: this.handleOptionFocus, onKeyDown: this.handleOptionKeyDown, "aria-selected": isSelected ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : undefined, "data-selected": isSelected ? 'true' : undefined, "data-focused": isFocused ? 'true' : undefined, "data-disabled": this.disabled ? 'true' : undefined, tabindex: -1 }, h("span", { key: '6c2b16e8a4de74912a55762fd71d11b960e070c0', class: "option-label" }, h("slot", { key: '99a147943a0e965170c7dde7b9fbf4745262c302' })), isSelected && (h("span", { key: 'b436d100e94537723b8daa78869b1ff199c0c121', class: "option-indicator", "aria-hidden": "true" }, h("slot", { key: '037f26b6213220ef26f88e70895b358cb615cc46', name: "selected-indicator" }, h("svg", { key: '54a7fbc3119e83bfd1173cc60b349cb9eb0d745a', width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '22c392c22a9334bf302c85bf2745deb701dfdf59', d: "M10 3L4.5 8.5L2 6", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }))))))));
|
|
85
85
|
}
|
|
86
86
|
get el() { return this; }
|
|
87
87
|
static get style() { return sekiSelectOptionCss; }
|
package/dist/cdn/seki-select.js
CHANGED
|
@@ -342,7 +342,7 @@ const SekiSelect$1 = /*@__PURE__*/ proxyCustomElement(class SekiSelect extends H
|
|
|
342
342
|
// Render
|
|
343
343
|
// ===========================
|
|
344
344
|
render() {
|
|
345
|
-
return (h(Host, { key: '
|
|
345
|
+
return (h(Host, { key: '78edc08bd62bc19a1752ec58b966e57e5ef3afc8' }, h("slot", { key: 'adcf89b43702e2f62a60d73e693d9b5d362e3169' }), this.name && this.renderHiddenNativeElement()));
|
|
346
346
|
}
|
|
347
347
|
renderHiddenNativeElement() {
|
|
348
348
|
if (this.multiple) {
|
|
@@ -19,7 +19,7 @@ const SekiSkeleton$1 = /*@__PURE__*/ proxyCustomElement(class SekiSkeleton exten
|
|
|
19
19
|
}
|
|
20
20
|
}
|
|
21
21
|
render() {
|
|
22
|
-
return (h("div", { key: '
|
|
22
|
+
return (h("div", { key: '11473c8f2d21d98f1836419fe0c628fbaf5e1e7d', class: "skeleton", part: "skeleton", role: "status", "aria-busy": "true", "aria-label": this.ariaLabel || undefined }));
|
|
23
23
|
}
|
|
24
24
|
static get style() { return sekiSkeletonCss; }
|
|
25
25
|
}, [257, "seki-skeleton", {
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import type { Components, JSX } from "../types/components";
|
|
2
|
+
|
|
3
|
+
interface SekiTooltip extends Components.SekiTooltip, HTMLElement {}
|
|
4
|
+
export const SekiTooltip: {
|
|
5
|
+
prototype: SekiTooltip;
|
|
6
|
+
new (): SekiTooltip;
|
|
7
|
+
};
|
|
8
|
+
/**
|
|
9
|
+
* Used to define this component and all nested components recursively.
|
|
10
|
+
*/
|
|
11
|
+
export const defineCustomElement: () => void;
|
|
@@ -0,0 +1,378 @@
|
|
|
1
|
+
import { p as proxyCustomElement, H, c as createEvent, h } from './p-bMBhrs0a.js';
|
|
2
|
+
|
|
3
|
+
const sekiTooltipCss = ":host{--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%)}:host{--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)}:host([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)}:host{--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);--seki-input-ring-offset:2px;--seki-select-trigger-bg:var(--seki-background);--seki-select-trigger-border:1px solid var(--seki-border);--seki-select-trigger-bg-hover:var(--seki-muted);--seki-select-trigger-radius:var(--seki-radius-md);--seki-select-trigger-min-height:2.5rem;--seki-select-trigger-padding:0.5rem 0.75rem;--seki-select-trigger-gap:0.5rem;--seki-select-content-bg:var(--seki-popover);--seki-select-content-border:1px solid var(--seki-border);--seki-select-content-shadow:0 10px 15px -3px rgb(0 0 0 / 0.1);--seki-select-content-radius:var(--seki-radius-md);--seki-select-content-padding:0.5rem 0;--seki-select-option-padding:0.5rem 0.75rem;--seki-select-option-gap:0.5rem;--seki-select-option-radius:var(--seki-radius-sm);--seki-select-option-bg-hover:var(--seki-muted);--seki-select-option-bg-selected:var(--seki-muted);--seki-select-group-label-padding:0.5rem 0.75rem;--seki-select-group-label-font-size:var(--seki-font-size-xs);--seki-select-group-label-font-weight:var(--seki-font-semibold);--seki-select-group-label-color:var(--seki-muted-foreground);--seki-select-group-separator:1px solid var(--seki-border)}:host{--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}:host{--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)}:host{--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}:host{--seki-radius-sm:0.25rem;--seki-radius-md:0.375rem;--seki-radius-lg:0.5rem;--seki-radius-xl:1rem;}:host{display:contents;--tooltip-bg:var(--seki-color-background);--tooltip-text:var(--seki-color-foreground);--tooltip-padding:var(--seki-spacing-2) var(--seki-spacing-3);--tooltip-radius:var(--seki-radius-md);--tooltip-shadow:var(--seki-shadow-md);--tooltip-font-size:var(--seki-font-size-body-sm);--tooltip-arrow-size:8px;--tooltip-transition-duration:200ms}@media (prefers-color-scheme: dark){:host{--tooltip-bg:var(--seki-color-background-dark, #1a1a1a);--tooltip-text:var(--seki-color-foreground-dark, #ffffff)}}:host([data-theme='dark']){--tooltip-bg:var(--seki-color-background-dark, #1a1a1a);--tooltip-text:var(--seki-color-foreground-dark, #ffffff)}.tooltip{position:fixed;box-sizing:border-box;background-color:var(--tooltip-bg);color:var(--tooltip-text);padding:var(--tooltip-padding);border-radius:var(--tooltip-radius);box-shadow:var(--tooltip-shadow);font-family:var(--seki-font-sans, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);font-size:var(--tooltip-font-size);line-height:1.5;max-width:280px;word-wrap:break-word;z-index:1000;pointer-events:auto;opacity:0;transform:scale(0.95) translateY(-4px);transition:opacity var(--tooltip-transition-duration) ease-out,\n transform var(--tooltip-transition-duration) ease-out;visibility:hidden}.tooltip--visible{opacity:1;transform:scale(1) translateY(0);visibility:visible}.tooltip-arrow{position:absolute;width:var(--tooltip-arrow-size);height:var(--tooltip-arrow-size);background-color:var(--tooltip-bg);transform:rotate(45deg);pointer-events:none}.tooltip[data-side='top']{margin-bottom:calc(var(--tooltip-arrow-size) / 2 + 4px)}.tooltip[data-side='top'] .tooltip-arrow{bottom:calc(var(--tooltip-arrow-size) / -2);left:50%;transform:translateX(-50%) rotate(45deg)}.tooltip[data-side='bottom']{margin-top:calc(var(--tooltip-arrow-size) / 2 + 4px)}.tooltip[data-side='bottom'] .tooltip-arrow{top:calc(var(--tooltip-arrow-size) / -2);left:50%;transform:translateX(-50%) rotate(45deg)}.tooltip[data-side='left']{margin-right:calc(var(--tooltip-arrow-size) / 2 + 4px)}.tooltip[data-side='left'] .tooltip-arrow{right:calc(var(--tooltip-arrow-size) / -2);top:50%;transform:translateY(-50%) rotate(45deg)}.tooltip[data-side='right']{margin-left:calc(var(--tooltip-arrow-size) / 2 + 4px)}.tooltip[data-side='right'] .tooltip-arrow{left:calc(var(--tooltip-arrow-size) / -2);top:50%;transform:translateY(-50%) rotate(45deg)}.tooltip:focus-visible{outline:2px solid var(--seki-accent);outline-offset:2px}@media (prefers-reduced-motion: reduce){.tooltip{transition:opacity 0s, transform 0s}}::slotted([slot='content']){margin:0;line-height:inherit;font-size:inherit}::slotted([slot='trigger']){cursor:help}";
|
|
4
|
+
|
|
5
|
+
const SekiTooltip$1 = /*@__PURE__*/ proxyCustomElement(class SekiTooltip extends H {
|
|
6
|
+
constructor(registerHost) {
|
|
7
|
+
super();
|
|
8
|
+
if (registerHost !== false) {
|
|
9
|
+
this.__registerHost();
|
|
10
|
+
}
|
|
11
|
+
this.__attachShadow();
|
|
12
|
+
this.showTooltip = createEvent(this, "showTooltip");
|
|
13
|
+
this.hideTooltip = createEvent(this, "hideTooltip");
|
|
14
|
+
this.positioned = createEvent(this, "positioned");
|
|
15
|
+
/**
|
|
16
|
+
* Milliseconds to delay before showing tooltip on hover
|
|
17
|
+
* @default 0
|
|
18
|
+
* @min 0
|
|
19
|
+
* @max 2000
|
|
20
|
+
*/
|
|
21
|
+
this.delay = 0;
|
|
22
|
+
/**
|
|
23
|
+
* Preferred positioning side for tooltip
|
|
24
|
+
* 'auto' uses intelligent repositioning based on viewport space
|
|
25
|
+
* @default 'auto'
|
|
26
|
+
*/
|
|
27
|
+
this.side = 'auto';
|
|
28
|
+
/**
|
|
29
|
+
* Disable tooltip interactions and visibility
|
|
30
|
+
* @default false
|
|
31
|
+
*/
|
|
32
|
+
this.disabled = false;
|
|
33
|
+
/**
|
|
34
|
+
* Pixels between tooltip and trigger element
|
|
35
|
+
* @default 8
|
|
36
|
+
* @min 0
|
|
37
|
+
*/
|
|
38
|
+
this.offset = 8;
|
|
39
|
+
/**
|
|
40
|
+
* Internal state: whether tooltip is currently visible
|
|
41
|
+
*/
|
|
42
|
+
this.isVisible = false;
|
|
43
|
+
/**
|
|
44
|
+
* Internal state: current calculated position
|
|
45
|
+
*/
|
|
46
|
+
this.currentPosition = 'top';
|
|
47
|
+
// Internal state tracking
|
|
48
|
+
this.showTimer = null;
|
|
49
|
+
this.hideTimer = null;
|
|
50
|
+
this.triggerEl = null;
|
|
51
|
+
this.longPressTimer = null;
|
|
52
|
+
this.touchStartX = 0;
|
|
53
|
+
this.touchStartY = 0;
|
|
54
|
+
/**
|
|
55
|
+
* Handle mouse enter on trigger
|
|
56
|
+
*/
|
|
57
|
+
this.onTriggerMouseEnter = () => {
|
|
58
|
+
if (this.disabled)
|
|
59
|
+
return;
|
|
60
|
+
// Clear hide timer if exists
|
|
61
|
+
if (this.hideTimer) {
|
|
62
|
+
clearTimeout(this.hideTimer);
|
|
63
|
+
this.hideTimer = null;
|
|
64
|
+
}
|
|
65
|
+
// Set show timer with delay
|
|
66
|
+
if (this.showTimer) {
|
|
67
|
+
clearTimeout(this.showTimer);
|
|
68
|
+
}
|
|
69
|
+
this.showTimer = window.setTimeout(() => {
|
|
70
|
+
this.show();
|
|
71
|
+
}, this.delay);
|
|
72
|
+
};
|
|
73
|
+
/**
|
|
74
|
+
* Handle mouse leave from trigger
|
|
75
|
+
*/
|
|
76
|
+
this.onTriggerMouseLeave = () => {
|
|
77
|
+
// Clear show timer
|
|
78
|
+
if (this.showTimer) {
|
|
79
|
+
clearTimeout(this.showTimer);
|
|
80
|
+
this.showTimer = null;
|
|
81
|
+
}
|
|
82
|
+
// Debounce hide to allow moving back over trigger
|
|
83
|
+
if (this.hideTimer) {
|
|
84
|
+
clearTimeout(this.hideTimer);
|
|
85
|
+
}
|
|
86
|
+
this.hideTimer = window.setTimeout(() => {
|
|
87
|
+
this.hide();
|
|
88
|
+
}, 100);
|
|
89
|
+
};
|
|
90
|
+
/**
|
|
91
|
+
* Handle focus on trigger (accessibility)
|
|
92
|
+
*/
|
|
93
|
+
this.onTriggerFocus = () => {
|
|
94
|
+
if (this.disabled)
|
|
95
|
+
return;
|
|
96
|
+
// Clear timers
|
|
97
|
+
if (this.showTimer)
|
|
98
|
+
clearTimeout(this.showTimer);
|
|
99
|
+
if (this.hideTimer)
|
|
100
|
+
clearTimeout(this.hideTimer);
|
|
101
|
+
this.showTimer = null;
|
|
102
|
+
this.hideTimer = null;
|
|
103
|
+
// Show immediately on focus (no delay)
|
|
104
|
+
this.show();
|
|
105
|
+
};
|
|
106
|
+
/**
|
|
107
|
+
* Handle blur from trigger
|
|
108
|
+
*/
|
|
109
|
+
this.onTriggerBlur = () => {
|
|
110
|
+
// Clear timers
|
|
111
|
+
if (this.showTimer)
|
|
112
|
+
clearTimeout(this.showTimer);
|
|
113
|
+
if (this.hideTimer)
|
|
114
|
+
clearTimeout(this.hideTimer);
|
|
115
|
+
this.showTimer = null;
|
|
116
|
+
this.hideTimer = null;
|
|
117
|
+
// Hide immediately on blur
|
|
118
|
+
this.hide();
|
|
119
|
+
};
|
|
120
|
+
/**
|
|
121
|
+
* Handle touch start (long-press detection)
|
|
122
|
+
*/
|
|
123
|
+
this.onTriggerTouchStart = (e) => {
|
|
124
|
+
if (this.disabled || !e.touches[0])
|
|
125
|
+
return;
|
|
126
|
+
this.touchStartX = e.touches[0].clientX;
|
|
127
|
+
this.touchStartY = e.touches[0].clientY;
|
|
128
|
+
// Start long-press timer (500ms)
|
|
129
|
+
if (this.longPressTimer)
|
|
130
|
+
clearTimeout(this.longPressTimer);
|
|
131
|
+
this.longPressTimer = window.setTimeout(() => {
|
|
132
|
+
this.show();
|
|
133
|
+
}, 500);
|
|
134
|
+
};
|
|
135
|
+
/**
|
|
136
|
+
* Handle touch move (cancel long-press if movement > 10px)
|
|
137
|
+
*/
|
|
138
|
+
this.onTriggerTouchMove = (e) => {
|
|
139
|
+
if (!e.touches[0] || !this.longPressTimer)
|
|
140
|
+
return;
|
|
141
|
+
const dx = Math.abs(e.touches[0].clientX - this.touchStartX);
|
|
142
|
+
const dy = Math.abs(e.touches[0].clientY - this.touchStartY);
|
|
143
|
+
if (dx > 10 || dy > 10) {
|
|
144
|
+
// Movement too large, cancel long-press
|
|
145
|
+
clearTimeout(this.longPressTimer);
|
|
146
|
+
this.longPressTimer = null;
|
|
147
|
+
}
|
|
148
|
+
};
|
|
149
|
+
/**
|
|
150
|
+
* Handle touch end (cancel long-press if not yet fired)
|
|
151
|
+
*/
|
|
152
|
+
this.onTriggerTouchEnd = () => {
|
|
153
|
+
if (this.longPressTimer) {
|
|
154
|
+
clearTimeout(this.longPressTimer);
|
|
155
|
+
this.longPressTimer = null;
|
|
156
|
+
}
|
|
157
|
+
};
|
|
158
|
+
/**
|
|
159
|
+
* Handle Escape key to dismiss tooltip
|
|
160
|
+
*/
|
|
161
|
+
this.onEscapeKey = (event) => {
|
|
162
|
+
if (event.key === 'Escape' && this.isVisible) {
|
|
163
|
+
event.preventDefault();
|
|
164
|
+
this.hide();
|
|
165
|
+
// Keep focus on trigger
|
|
166
|
+
const trigger = this.el.querySelector('[slot="trigger"]');
|
|
167
|
+
if (trigger) {
|
|
168
|
+
trigger.focus();
|
|
169
|
+
}
|
|
170
|
+
}
|
|
171
|
+
};
|
|
172
|
+
}
|
|
173
|
+
/**
|
|
174
|
+
* Show tooltip programmatically
|
|
175
|
+
* @returns Promise resolves when tooltip is visible
|
|
176
|
+
*/
|
|
177
|
+
async show() {
|
|
178
|
+
if (this.disabled)
|
|
179
|
+
return;
|
|
180
|
+
// Clear any pending hide timer
|
|
181
|
+
if (this.hideTimer) {
|
|
182
|
+
clearTimeout(this.hideTimer);
|
|
183
|
+
this.hideTimer = null;
|
|
184
|
+
}
|
|
185
|
+
// Set visible state
|
|
186
|
+
this.isVisible = true;
|
|
187
|
+
// Calculate position
|
|
188
|
+
this.calculatePosition();
|
|
189
|
+
// Emit show event
|
|
190
|
+
this.showTooltip.emit({ triggerEl: this.triggerEl || this.el });
|
|
191
|
+
}
|
|
192
|
+
/**
|
|
193
|
+
* Hide tooltip programmatically
|
|
194
|
+
* @returns Promise resolves when tooltip is hidden
|
|
195
|
+
*/
|
|
196
|
+
async hide() {
|
|
197
|
+
// Clear any pending show timer
|
|
198
|
+
if (this.showTimer) {
|
|
199
|
+
clearTimeout(this.showTimer);
|
|
200
|
+
this.showTimer = null;
|
|
201
|
+
}
|
|
202
|
+
// Set hidden state
|
|
203
|
+
this.isVisible = false;
|
|
204
|
+
// Emit hide event
|
|
205
|
+
this.hideTooltip.emit({ reason: 'blur' });
|
|
206
|
+
}
|
|
207
|
+
/**
|
|
208
|
+
* Recalculate tooltip position
|
|
209
|
+
* Call after trigger element moves or window resizes
|
|
210
|
+
*/
|
|
211
|
+
async updatePosition() {
|
|
212
|
+
if (this.isVisible) {
|
|
213
|
+
this.calculatePosition();
|
|
214
|
+
}
|
|
215
|
+
}
|
|
216
|
+
/**
|
|
217
|
+
* Calculate tooltip position based on viewport
|
|
218
|
+
*/
|
|
219
|
+
calculatePosition() {
|
|
220
|
+
var _a;
|
|
221
|
+
// Get trigger element
|
|
222
|
+
const trigger = this.el.querySelector('[slot="trigger"]');
|
|
223
|
+
if (!trigger)
|
|
224
|
+
return;
|
|
225
|
+
this.triggerEl = trigger;
|
|
226
|
+
// Get tooltip element from shadow DOM
|
|
227
|
+
const tooltip = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.tooltip');
|
|
228
|
+
if (!tooltip)
|
|
229
|
+
return;
|
|
230
|
+
// Get trigger bounds
|
|
231
|
+
const triggerRect = trigger.getBoundingClientRect();
|
|
232
|
+
const tooltipRect = tooltip.getBoundingClientRect();
|
|
233
|
+
const viewport = {
|
|
234
|
+
width: window.innerWidth,
|
|
235
|
+
height: window.innerHeight,
|
|
236
|
+
};
|
|
237
|
+
// Calculate positions
|
|
238
|
+
const positions = {
|
|
239
|
+
top: {
|
|
240
|
+
x: triggerRect.left + triggerRect.width / 2 - tooltipRect.width / 2,
|
|
241
|
+
y: triggerRect.top - tooltipRect.height - this.offset,
|
|
242
|
+
},
|
|
243
|
+
bottom: {
|
|
244
|
+
x: triggerRect.left + triggerRect.width / 2 - tooltipRect.width / 2,
|
|
245
|
+
y: triggerRect.top + triggerRect.height + this.offset,
|
|
246
|
+
},
|
|
247
|
+
left: {
|
|
248
|
+
x: triggerRect.left - tooltipRect.width - this.offset,
|
|
249
|
+
y: triggerRect.top + triggerRect.height / 2 - tooltipRect.height / 2,
|
|
250
|
+
},
|
|
251
|
+
right: {
|
|
252
|
+
x: triggerRect.left + triggerRect.width + this.offset,
|
|
253
|
+
y: triggerRect.top + triggerRect.height / 2 - tooltipRect.height / 2,
|
|
254
|
+
},
|
|
255
|
+
};
|
|
256
|
+
// Check each position for viewport fit (8px margin minimum)
|
|
257
|
+
const margin = 8;
|
|
258
|
+
for (const [sideKey, pos] of Object.entries(positions)) {
|
|
259
|
+
const fits = pos.x >= margin &&
|
|
260
|
+
pos.x + tooltipRect.width <= viewport.width - margin &&
|
|
261
|
+
pos.y >= margin &&
|
|
262
|
+
pos.y + tooltipRect.height <= viewport.height - margin;
|
|
263
|
+
if (fits) {
|
|
264
|
+
this.currentPosition = sideKey;
|
|
265
|
+
this.applyPosition(tooltip, pos);
|
|
266
|
+
this.positioned.emit({ side: this.currentPosition, offset: this.offset });
|
|
267
|
+
return;
|
|
268
|
+
}
|
|
269
|
+
}
|
|
270
|
+
// Fallback: use preferred side, clamp to viewport
|
|
271
|
+
const preferredSide = this.side === 'auto' ? 'top' : this.side;
|
|
272
|
+
const pos = positions[preferredSide] || positions.top;
|
|
273
|
+
this.currentPosition = preferredSide;
|
|
274
|
+
// Clamp to viewport
|
|
275
|
+
pos.x = Math.max(margin, Math.min(pos.x, viewport.width - tooltipRect.width - margin));
|
|
276
|
+
pos.y = Math.max(margin, Math.min(pos.y, viewport.height - tooltipRect.height - margin));
|
|
277
|
+
this.applyPosition(tooltip, pos);
|
|
278
|
+
this.positioned.emit({ side: this.currentPosition, offset: this.offset });
|
|
279
|
+
}
|
|
280
|
+
/**
|
|
281
|
+
* Apply calculated position to tooltip element
|
|
282
|
+
*/
|
|
283
|
+
applyPosition(tooltip, pos) {
|
|
284
|
+
tooltip.style.position = 'fixed';
|
|
285
|
+
tooltip.style.left = `${pos.x}px`;
|
|
286
|
+
tooltip.style.top = `${pos.y}px`;
|
|
287
|
+
tooltip.style.zIndex = '1000';
|
|
288
|
+
}
|
|
289
|
+
/**
|
|
290
|
+
* Attach event listeners to trigger
|
|
291
|
+
*/
|
|
292
|
+
attachTriggerListeners() {
|
|
293
|
+
const trigger = this.el.querySelector('[slot="trigger"]');
|
|
294
|
+
if (!trigger)
|
|
295
|
+
return;
|
|
296
|
+
// Mouse events
|
|
297
|
+
trigger.addEventListener('mouseenter', this.onTriggerMouseEnter);
|
|
298
|
+
trigger.addEventListener('mouseleave', this.onTriggerMouseLeave);
|
|
299
|
+
// Keyboard events (focus/blur)
|
|
300
|
+
trigger.addEventListener('focus', this.onTriggerFocus);
|
|
301
|
+
trigger.addEventListener('blur', this.onTriggerBlur);
|
|
302
|
+
// Touch events (long-press)
|
|
303
|
+
trigger.addEventListener('touchstart', this.onTriggerTouchStart);
|
|
304
|
+
trigger.addEventListener('touchmove', this.onTriggerTouchMove);
|
|
305
|
+
trigger.addEventListener('touchend', this.onTriggerTouchEnd);
|
|
306
|
+
// Escape key on document
|
|
307
|
+
document.addEventListener('keydown', this.onEscapeKey);
|
|
308
|
+
// Apply aria-describedby to trigger
|
|
309
|
+
const contentSlot = this.el.querySelector('[slot="content"]');
|
|
310
|
+
if (contentSlot) {
|
|
311
|
+
const contentId = `tooltip-${Math.random().toString(36).substr(2, 9)}`;
|
|
312
|
+
contentSlot.id = contentId;
|
|
313
|
+
trigger.setAttribute('aria-describedby', contentId);
|
|
314
|
+
}
|
|
315
|
+
}
|
|
316
|
+
/**
|
|
317
|
+
* Remove event listeners from trigger
|
|
318
|
+
*/
|
|
319
|
+
detachTriggerListeners() {
|
|
320
|
+
const trigger = this.el.querySelector('[slot="trigger"]');
|
|
321
|
+
if (!trigger)
|
|
322
|
+
return;
|
|
323
|
+
trigger.removeEventListener('mouseenter', this.onTriggerMouseEnter);
|
|
324
|
+
trigger.removeEventListener('mouseleave', this.onTriggerMouseLeave);
|
|
325
|
+
trigger.removeEventListener('focus', this.onTriggerFocus);
|
|
326
|
+
trigger.removeEventListener('blur', this.onTriggerBlur);
|
|
327
|
+
trigger.removeEventListener('touchstart', this.onTriggerTouchStart);
|
|
328
|
+
trigger.removeEventListener('touchmove', this.onTriggerTouchMove);
|
|
329
|
+
trigger.removeEventListener('touchend', this.onTriggerTouchEnd);
|
|
330
|
+
}
|
|
331
|
+
componentDidLoad() {
|
|
332
|
+
this.attachTriggerListeners();
|
|
333
|
+
}
|
|
334
|
+
disconnectedCallback() {
|
|
335
|
+
this.detachTriggerListeners();
|
|
336
|
+
// Clean up timers
|
|
337
|
+
if (this.showTimer)
|
|
338
|
+
clearTimeout(this.showTimer);
|
|
339
|
+
if (this.hideTimer)
|
|
340
|
+
clearTimeout(this.hideTimer);
|
|
341
|
+
if (this.longPressTimer)
|
|
342
|
+
clearTimeout(this.longPressTimer);
|
|
343
|
+
}
|
|
344
|
+
render() {
|
|
345
|
+
return (h("div", { key: '26ad92440881dc154c9fd364dd59d621eb949ba1', class: `tooltip ${this.isVisible ? 'tooltip--visible' : ''}`, role: "tooltip" }, h("slot", { key: 'f08dda70ba8fb3dc936e62c3fee51ddf60cd7585', name: "content" }), h("div", { key: '14daf9b8dcd099f01c6d4fb704c9dd4bc5081dc7', class: "tooltip-arrow" })));
|
|
346
|
+
}
|
|
347
|
+
get el() { return this; }
|
|
348
|
+
static get style() { return sekiTooltipCss; }
|
|
349
|
+
}, [257, "seki-tooltip", {
|
|
350
|
+
"delay": [2],
|
|
351
|
+
"side": [1],
|
|
352
|
+
"disabled": [4],
|
|
353
|
+
"offset": [2],
|
|
354
|
+
"isVisible": [32],
|
|
355
|
+
"currentPosition": [32],
|
|
356
|
+
"show": [64],
|
|
357
|
+
"hide": [64],
|
|
358
|
+
"updatePosition": [64]
|
|
359
|
+
}]);
|
|
360
|
+
function defineCustomElement$1() {
|
|
361
|
+
if (typeof customElements === "undefined") {
|
|
362
|
+
return;
|
|
363
|
+
}
|
|
364
|
+
const components = ["seki-tooltip"];
|
|
365
|
+
components.forEach(tagName => { switch (tagName) {
|
|
366
|
+
case "seki-tooltip":
|
|
367
|
+
if (!customElements.get(tagName)) {
|
|
368
|
+
customElements.define(tagName, SekiTooltip$1);
|
|
369
|
+
}
|
|
370
|
+
break;
|
|
371
|
+
} });
|
|
372
|
+
}
|
|
373
|
+
defineCustomElement$1();
|
|
374
|
+
|
|
375
|
+
const SekiTooltip = SekiTooltip$1;
|
|
376
|
+
const defineCustomElement = defineCustomElement$1;
|
|
377
|
+
|
|
378
|
+
export { SekiTooltip, defineCustomElement };
|
package/dist/cjs/index.cjs.js
CHANGED
|
@@ -78,7 +78,7 @@ const SekiSwitch = class {
|
|
|
78
78
|
render() {
|
|
79
79
|
const isChecked = this.isChecked;
|
|
80
80
|
const dataState = isChecked ? 'checked' : 'unchecked';
|
|
81
|
-
return (index.h(index.Host, { key: '
|
|
81
|
+
return (index.h(index.Host, { key: '3046a6647d7cfd10bf9789aa9cf3b7a88b9a3a10', "data-state": dataState, "data-disabled": this.disabled ? '' : null }, index.h("div", { key: 'cd8423b9f7295e5e3ef9d7e64ead3fe6502386a2', class: "switch", part: "switch", role: "switch", "aria-checked": isChecked ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : undefined, "aria-label": this.ariaLabel || undefined, "aria-required": this.required ? 'true' : undefined, tabindex: this.disabled ? -1 : 0, onClick: this.handleClick }, index.h("span", { key: '618ab67d5fab80323f64ec0b1b342561be2585b0', class: "thumb", part: "thumb" })), this.name && (index.h("input", { key: 'd51e9108038b8796175082231ca3ce7e61106f31', type: "checkbox", name: this.name, value: this.value, checked: isChecked, required: this.required, disabled: this.disabled, style: { display: 'none' }, tabindex: -1, "aria-hidden": "true" }))));
|
|
82
82
|
}
|
|
83
83
|
};
|
|
84
84
|
SekiSwitch.style = sekiSwitchCss;
|
package/dist/cjs/loader.cjs.js
CHANGED
|
@@ -5,7 +5,7 @@ var index = require('./index-Dd6_-KaR.js');
|
|
|
5
5
|
const defineCustomElements = async (win, options) => {
|
|
6
6
|
if (typeof window === 'undefined') return undefined;
|
|
7
7
|
await index.globalScripts();
|
|
8
|
-
return index.bootstrapLazy([["seki-button.cjs",[[257,"seki-button",{"variant":[1],"size":[1],"disabled":[4],"type":[1],"ariaLabel":[1,"aria-label"]}]]],["seki-field.cjs",[[257,"seki-field",{"orientation":[1],"invalid":[4]}]]],["seki-field-description.cjs",[[257,"seki-field-description",{"descriptorId":[1,"descriptor-id"],"componentId":[32],"getId":[64]}]]],["seki-field-error.cjs",[[257,"seki-field-error",{"errorId":[1,"error-id"],"visible":[4],"componentId":[32],"previousVisible":[32],"getId":[64],"setVisible":[64]},null,{"visible":["handleVisibleChange"]}]]],["seki-field-group.cjs",[[257,"seki-field-group",{"gap":[1]}]]],["seki-field-label.cjs",[[257,"seki-field-label",{"htmlFor":[1,"html-for"],"required":[4]}]]],["seki-field-legend.cjs",[[257,"seki-field-legend"]]],["seki-fieldset.cjs",[[257,"seki-fieldset",{"disabled":[4]}]]],["seki-input.cjs",[[321,"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-select.cjs",[[257,"seki-select",{"value":[1032],"defaultValue":[8,"default-value"],"multiple":[4],"placeholder":[1],"disabled":[4],"required":[4],"open":[1028],"defaultOpen":[4,"default-open"],"name":[1],"maxVisiblePills":[2,"max-visible-pills"],"ariaLabel":[1,"aria-label"],"ariaLabelledby":[1,"aria-labelledby"],"ariaDescribedby":[1,"aria-describedby"],"placement":[1],"maxHeight":[1,"max-height"],"internalValue":[32],"isOpen":[32],"focusedOptionValue":[32],"registeredOptions":[32],"hasBeenActivated":[32],"searchBuffer":[32],"searchActive":[32],"openDropdown":[64],"closeDropdown":[64],"focusTrigger":[64],"clearSelection":[64],"handleKeyboard":[64]},null,{"value":["handleValuePropChange"],"open":["handleOpenPropChange"],"isOpen":["handleIsOpenChange"],"internalValue":["handleInternalValueChange"]}]]],["seki-select-content.cjs",[[257,"seki-select-content",{"forceUpdate":[32],"scrollToOption":[64]}]]],["seki-select-group.cjs",[[257,"seki-select-group",{"label":[1]}]]],["seki-select-option.cjs",[[257,"seki-select-option",{"value":[8],"label":[1],"disabled":[4]}]]],["seki-select-trigger.cjs",[[257,"seki-select-trigger",{"forceUpdate":[32]}]]],["seki-skeleton.cjs",[[257,"seki-skeleton",{"ariaLabel":[1,"aria-label"]}]]],["seki-switch.cjs",[[257,"seki-switch",{"checked":[4],"defaultChecked":[4,"default-checked"],"disabled":[4],"required":[4],"name":[1],"value":[1],"ariaLabel":[1,"aria-label"],"internalChecked":[32]},[[0,"keydown","handleKeyDown"]]]]]], options);
|
|
8
|
+
return index.bootstrapLazy([["seki-button.cjs",[[257,"seki-button",{"variant":[1],"size":[1],"disabled":[4],"type":[1],"ariaLabel":[1,"aria-label"]}]]],["seki-field.cjs",[[257,"seki-field",{"orientation":[1],"invalid":[4]}]]],["seki-field-description.cjs",[[257,"seki-field-description",{"descriptorId":[1,"descriptor-id"],"componentId":[32],"getId":[64]}]]],["seki-field-error.cjs",[[257,"seki-field-error",{"errorId":[1,"error-id"],"visible":[4],"componentId":[32],"previousVisible":[32],"getId":[64],"setVisible":[64]},null,{"visible":["handleVisibleChange"]}]]],["seki-field-group.cjs",[[257,"seki-field-group",{"gap":[1]}]]],["seki-field-label.cjs",[[257,"seki-field-label",{"htmlFor":[1,"html-for"],"required":[4]}]]],["seki-field-legend.cjs",[[257,"seki-field-legend"]]],["seki-fieldset.cjs",[[257,"seki-fieldset",{"disabled":[4]}]]],["seki-input.cjs",[[321,"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-select.cjs",[[257,"seki-select",{"value":[1032],"defaultValue":[8,"default-value"],"multiple":[4],"placeholder":[1],"disabled":[4],"required":[4],"open":[1028],"defaultOpen":[4,"default-open"],"name":[1],"maxVisiblePills":[2,"max-visible-pills"],"ariaLabel":[1,"aria-label"],"ariaLabelledby":[1,"aria-labelledby"],"ariaDescribedby":[1,"aria-describedby"],"placement":[1],"maxHeight":[1,"max-height"],"internalValue":[32],"isOpen":[32],"focusedOptionValue":[32],"registeredOptions":[32],"hasBeenActivated":[32],"searchBuffer":[32],"searchActive":[32],"openDropdown":[64],"closeDropdown":[64],"focusTrigger":[64],"clearSelection":[64],"handleKeyboard":[64]},null,{"value":["handleValuePropChange"],"open":["handleOpenPropChange"],"isOpen":["handleIsOpenChange"],"internalValue":["handleInternalValueChange"]}]]],["seki-select-content.cjs",[[257,"seki-select-content",{"forceUpdate":[32],"scrollToOption":[64]}]]],["seki-select-group.cjs",[[257,"seki-select-group",{"label":[1]}]]],["seki-select-option.cjs",[[257,"seki-select-option",{"value":[8],"label":[1],"disabled":[4]}]]],["seki-select-trigger.cjs",[[257,"seki-select-trigger",{"forceUpdate":[32]}]]],["seki-skeleton.cjs",[[257,"seki-skeleton",{"ariaLabel":[1,"aria-label"]}]]],["seki-switch.cjs",[[257,"seki-switch",{"checked":[4],"defaultChecked":[4,"default-checked"],"disabled":[4],"required":[4],"name":[1],"value":[1],"ariaLabel":[1,"aria-label"],"internalChecked":[32]},[[0,"keydown","handleKeyDown"]]]]],["seki-tooltip.cjs",[[257,"seki-tooltip",{"delay":[2],"side":[1],"disabled":[4],"offset":[2],"isVisible":[32],"currentPosition":[32],"show":[64],"hide":[64],"updatePosition":[64]}]]]], options);
|
|
9
9
|
};
|
|
10
10
|
|
|
11
11
|
exports.setNonce = index.setNonce;
|
|
@@ -33,7 +33,7 @@ const SekiButton = class {
|
|
|
33
33
|
}
|
|
34
34
|
}
|
|
35
35
|
render() {
|
|
36
|
-
return (index.h("button", { key: '
|
|
36
|
+
return (index.h("button", { key: '17841111481259910cd72cdcb861872918c86452', class: `button button--${this.variant} button--${this.size}`, type: this.type, disabled: this.disabled, "aria-disabled": this.disabled ? 'true' : null, "aria-label": this.ariaLabel }, index.h("slot", { key: '1a4dfb3cb9eb88af7065cd765c0056a93c94ecc1' })));
|
|
37
37
|
}
|
|
38
38
|
};
|
|
39
39
|
SekiButton.style = sekiButtonCss;
|
|
@@ -35,7 +35,7 @@ const SekiFieldDescription = class {
|
|
|
35
35
|
return this.componentId;
|
|
36
36
|
}
|
|
37
37
|
render() {
|
|
38
|
-
return (index.h("div", { key: '
|
|
38
|
+
return (index.h("div", { key: '944a6268efe02b6b69725daf7503a9bcf8482f94', id: this.componentId, class: "description" }, index.h("slot", { key: '900d5afcf9662fe2e8f32acf55b21823389dbb59' })));
|
|
39
39
|
}
|
|
40
40
|
};
|
|
41
41
|
SekiFieldDescription.style = sekiFieldDescriptionCss;
|