@nmorph/nmorph-ui-kit 3.0.7 → 3.0.9

package/dist/components/data/nmorph-media-tile/NmorphMediaTile.vue2.js

@@ -11,6 +11,8 @@ import D from "../../../assets/icons/loader.svg.js";
 const W = /* @__PURE__ */ _({
   __name: "NmorphMediaTile",
   props: {
+    design: { type: null, required: !1, default: "nmorph" },
+    aspect: { type: String, required: !1, default: "video" },
     src: { type: String, required: !1, default: "" },
     srcObject: { type: null, required: !1, default: null },
     sinkId: { type: String, required: !1, default: void 0 },
@@ -33,7 +35,7 @@ const W = /* @__PURE__ */ _({
     errorText: { type: String, required: !1, default: "" }
   },
   setup(j, { expose: N }) {
-    const e = j, o = m(null), n = m(null), u = m({
+    const e = j, o = m(null), i = m(null), u = m({
       audio: 0,
       video: 0
     }), y = t(() => !!(e.src || e.srcObject)), h = (r) => !r || typeof r.getAudioTracks != "function" ? [] : r.getAudioTracks(), g = (r) => !r || typeof r.getVideoTracks != "function" ? [] : r.getVideoTracks(), d = (r) => {
@@ -41,13 +43,15 @@ const W = /* @__PURE__ */ _({
         audio: h(r).length,
         video: g(r).length
       };
-    }, k = t(() => typeof e.srcObject?.getVideoTracks == "function"), O = t(() => u.value.video > 0), S = t(
-      () => !!(e.src || e.srcObject && (!k.value || O.value))
-    ), c = t(() => y.value && S.value && !e.videoOff && !e.error), i = t(() => !!(e.srcObject && !e.muted && !e.error)), b = t(() => e.muted || i.value), T = t(() => c.value && e.src ? e.src : void 0), q = t(
+    }, k = t(() => typeof e.srcObject?.getVideoTracks == "function"), S = t(() => u.value.video > 0), O = t(
+      () => !!(e.src || e.srcObject && (!k.value || S.value))
+    ), s = t(() => y.value && O.value && !e.videoOff && !e.error), n = t(() => !!(e.srcObject && !e.muted && !e.error)), b = t(() => e.muted || n.value), T = t(() => s.value && e.src ? e.src : void 0), q = t(
       () => e.name.split(/\s+/).filter(Boolean).slice(0, 2).map((r) => r[0]?.toUpperCase()).join("")
     ), M = t(() => q.value || e.name || "?"), V = t(
       () => E({
         "nmorph-media-tile": [
+          e.design,
+          e.aspect,
           e.fit,
           e.mirrored && "mirrored",
           e.selected && "selected",
@@ -58,7 +62,7 @@ const W = /* @__PURE__ */ _({
           e.loading && "loading"
         ]
       })
-    ), s = (r) => {
+    ), c = (r) => {
       if (!r || e.sinkId === void 0) return;
       const a = r;
       typeof a.setSinkId == "function" && a.setSinkId(e.sinkId).catch(() => {
@@ -94,25 +98,25 @@ const W = /* @__PURE__ */ _({
         e.autoplay,
         e.videoOff,
         e.error,
-        c.value,
-        i.value,
+        s.value,
+        n.value,
         b.value,
         o.value,
-        n.value
+        i.value
       ],
       () => {
         if (o.value) {
           const r = e.srcObject;
-          o.value.srcObject !== r && (o.value.srcObject = r), s(o.value), e.autoplay && r && !e.videoOff && !e.error && p(o.value);
+          o.value.srcObject !== r && (o.value.srcObject = r), c(o.value), e.autoplay && r && !e.videoOff && !e.error && p(o.value);
         }
-        if (n.value) {
-          const r = i.value ? e.srcObject : null;
-          n.value.srcObject !== r && (n.value.srcObject = r), s(n.value), e.autoplay && i.value && p(n.value);
+        if (i.value) {
+          const r = n.value ? e.srcObject : null;
+          i.value.srcObject !== r && (i.value.srcObject = r), c(i.value), e.autoplay && n.value && p(i.value);
         }
       },
       { immediate: !0, flush: "post" }
     ), N({ videoRef: o });
-    const B = { props: e, videoRef: o, audioRef: n, srcObjectTrackCount: u, hasMediaSource: y, getAudioTracks: h, getVideoTracks: g, updateSrcObjectTrackCount: d, canInspectVideoTracks: k, hasVideoTracks: O, hasVideoSource: S, videoVisible: c, needsSeparateAudioOutput: i, videoMuted: b, videoSrc: T, initials: q, fallbackLabel: M, modifiers: V, setMediaElementSinkId: s, logMediaPlaybackError: f, playMediaElement: p, get NmorphAvatar() {
+    const B = { props: e, videoRef: o, audioRef: i, srcObjectTrackCount: u, hasMediaSource: y, getAudioTracks: h, getVideoTracks: g, updateSrcObjectTrackCount: d, canInspectVideoTracks: k, hasVideoTracks: S, hasVideoSource: O, videoVisible: s, needsSeparateAudioOutput: n, videoMuted: b, videoSrc: T, initials: q, fallbackLabel: M, modifiers: V, setMediaElementSinkId: c, logMediaPlaybackError: f, playMediaElement: p, get NmorphAvatar() {
       return R;
     }, get NmorphButton() {
       return w;

package/dist/components/data/nmorph-table/NmorphTable.css

@@ -1 +1 @@
-.nmorph-table{--nmorph-private-table-border-color: var(--nmorph-info-text-color);--nmorph-private-table-cell-height: auto;--nmorph-private-table-row-hover-background: var(--nmorph-info-color)}.nmorph-table .nmorph-table__header th{border-bottom:0}.nmorph-table .nmorph-table__button-wrapper{display:flex;align-items:center;margin-left:var(--indentation-03)}.nmorph-table table{width:calc(100% - 2px);margin-left:1px;table-layout:fixed;border-collapse:collapse;border-spacing:0}.nmorph-table .nmorph-table__table-data{padding:var(--indentation-03) 0;border-bottom:1px solid var(--nmorph-private-table-border-color)}.nmorph-table .nmorph-table__table-data--bordered{border:1px solid var(--nmorph-private-table-border-color)}.nmorph-table .nmorph-table__cell{padding:0 var(--indentation-03)}.nmorph-table .nmorph-table__cell-content{display:flex;align-items:center}.nmorph-table .nmorph-table__cell--data{height:var(--nmorph-private-table-cell-height)}.nmorph-table .nmorph-table__body{position:relative}.nmorph-table .nmorph-table__body--virtual{overflow-x:hidden}.nmorph-table .nmorph-table__body--virtual .nmorph-table__table-data{height:var(--nmorph-private-table-virtual-row-height);padding-top:0;padding-bottom:0}.nmorph-table .nmorph-table__body--virtual.nmorph-table__body--dynamic .nmorph-table__table-data{height:auto}.nmorph-table .nmorph-table__virtual-spacer{position:relative;min-width:100%}.nmorph-table .nmorph-table__virtual-content{position:absolute;top:0;right:0;left:0}.nmorph-table .nmorph-table__table-data-row--row-hover:hover,.nmorph-table .nmorph-table__table-data-row--active{background:var(--nmorph-private-table-row-hover-background)}.nmorph-table--nmorph{overflow:hidden;background:var(--nmorph-main-color);border-radius:var(--default-border-radius);box-shadow:var(--nmorph-shadow-outset);--nmorph-private-table-border-color: transparent}.nmorph-table--nmorph .nmorph-table__button-wrapper{padding:var(--indentation-02)}.nmorph-table--nmorph .nmorph-table__table-row{background:var(--nmorph-main-color);box-shadow:var(--nmorph-shadow-inset)}.nmorph-table--plain{overflow:hidden;background:var(--nmorph-main-color);border:var(--nmorph-plain-border);border-radius:var(--default-border-radius)}.nmorph-table--plain.nmorph-table--bordered{border:1px solid var(--nmorph-private-table-border-color)}.nmorph-table--plain.nmorph-table--bordered table{width:100%;margin-left:0}.nmorph-table--plain.nmorph-table--bordered .nmorph-table__table-data--bordered{border:0;border-right:1px solid var(--nmorph-private-table-border-color);border-bottom:1px solid var(--nmorph-private-table-border-color)}.nmorph-table--plain.nmorph-table--bordered .nmorph-table__table-data--bordered:last-child{border-right:0}.nmorph-table--plain.nmorph-table--bordered .nmorph-table__body:not(.nmorph-table__body--virtual) .nmorph-table__table-data-row:last-child .nmorph-table__table-data--bordered{border-bottom:0}
+.nmorph-table{--nmorph-private-table-border-color: color-mix(in srgb, var(--nmorph-text-color) 52%, transparent);--nmorph-private-table-cell-height: auto;--nmorph-private-table-row-hover-background: var(--nmorph-info-color)}.nmorph-table .nmorph-table__header th{border-bottom:0}.nmorph-table .nmorph-table__button-wrapper{display:flex;align-items:center;margin-left:var(--indentation-03)}.nmorph-table table{width:calc(100% - 2px);margin-left:1px;table-layout:fixed;border-collapse:collapse;border-spacing:0}.nmorph-table .nmorph-table__table-data{padding:var(--indentation-03) 0;border-bottom:1px solid var(--nmorph-private-table-border-color)}.nmorph-table .nmorph-table__table-data--bordered{border:1px solid var(--nmorph-private-table-border-color)}.nmorph-table .nmorph-table__cell{padding:0 var(--indentation-03)}.nmorph-table .nmorph-table__cell-content{display:flex;align-items:center}.nmorph-table .nmorph-table__cell--data{height:var(--nmorph-private-table-cell-height)}.nmorph-table .nmorph-table__body{position:relative}.nmorph-table .nmorph-table__body--virtual{overflow-x:hidden}.nmorph-table .nmorph-table__body--virtual .nmorph-table__table-data{height:var(--nmorph-private-table-virtual-row-height);padding-top:0;padding-bottom:0}.nmorph-table .nmorph-table__body--virtual.nmorph-table__body--dynamic .nmorph-table__table-data{height:auto}.nmorph-table .nmorph-table__virtual-spacer{position:relative;min-width:100%}.nmorph-table .nmorph-table__virtual-content{position:absolute;top:0;right:0;left:0}.nmorph-table .nmorph-table__table-data-row--row-hover:hover,.nmorph-table .nmorph-table__table-data-row--active{background:var(--nmorph-private-table-row-hover-background)}.nmorph-table--nmorph{overflow:hidden;background:var(--nmorph-main-color);border-radius:var(--default-border-radius);box-shadow:var(--nmorph-shadow-outset);--nmorph-private-table-border-color: transparent}.nmorph-table--nmorph .nmorph-table__button-wrapper{padding:var(--indentation-02)}.nmorph-table--nmorph .nmorph-table__table-row{background:var(--nmorph-main-color);box-shadow:var(--nmorph-shadow-inset)}.nmorph-table--plain{overflow:hidden;background:var(--nmorph-main-color);border:var(--nmorph-plain-border);border-radius:var(--default-border-radius)}.nmorph-table--plain.nmorph-table--bordered{border:1px solid var(--nmorph-private-table-border-color)}.nmorph-table--plain.nmorph-table--bordered table{width:100%;margin-left:0}.nmorph-table--plain.nmorph-table--bordered .nmorph-table__table-data--bordered{border:0;border-right:1px solid var(--nmorph-private-table-border-color);border-bottom:1px solid var(--nmorph-private-table-border-color)}.nmorph-table--plain.nmorph-table--bordered .nmorph-table__table-data--bordered:last-child{border-right:0}.nmorph-table--plain.nmorph-table--bordered .nmorph-table__body:not(.nmorph-table__body--virtual) .nmorph-table__table-data-row:last-child .nmorph-table__table-data--bordered{border-bottom:0}

package/dist/components/form/nmorph-color-picker/NmorphColorPicker.css

@@ -1 +1 @@
-.nmorph-color-picker{display:inline-flex;flex:0 0 auto;flex-direction:column;align-items:flex-start;width:fit-content;max-width:100%}.nmorph-color-picker .nmorph-color-picker__content{position:relative;display:inline-flex;gap:var(--indentation-03);align-items:center;width:fit-content;max-width:100%;height:var(--nmorph-private-control-height);padding:0 var(--default-indentation-input);background:var(--nmorph-main-color);border-radius:var(--default-border-radius);box-shadow:inset var(--base-shadow-width) var(--base-shadow-width) var(--base-shadow-blur) var(--nmorph-dark-shade-color),inset calc(-1 * var(--base-shadow-width)) calc(-1 * var(--base-shadow-width)) var(--base-shadow-blur) var(--nmorph-light-shade-color)}.nmorph-color-picker .nmorph-color-picker__native{position:absolute;width:100%;height:100%;cursor:pointer;opacity:0;inset:0}.nmorph-color-picker .nmorph-color-picker__swatch{flex:0 0 auto;width:calc(var(--nmorph-private-control-height) - var(--indentation-03));height:calc(var(--nmorph-private-control-height) - var(--indentation-03));border-radius:var(--default-border-radius);box-shadow:inset 0 0 0 1px #ffffff40,0 0 0 1px #0000001f}.nmorph-color-picker .nmorph-color-picker__value{flex:0 0 7ch;width:7ch;min-width:7ch;overflow:hidden;font-weight:var(--nmorph-private-control-font-weight);font-size:var(--nmorph-private-control-font-size);font-family:var(--font-family-mono);line-height:var(--nmorph-private-control-line-height);white-space:nowrap;text-overflow:ellipsis;transform:translateY(var(--nmorph-private-control-text-offset-y));user-select:none;font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}.nmorph-color-picker.nmorph-color-picker--rgb .nmorph-color-picker__value{flex-basis:18ch;width:18ch;min-width:18ch}.nmorph-color-picker.nmorph-color-picker--hsl .nmorph-color-picker__value{flex-basis:20ch;width:20ch;min-width:20ch}.nmorph-color-picker.nmorph--focused .nmorph-color-picker__content{background:var(--nmorph-accent-color);box-shadow:var(--base-shadow-width) var(--base-shadow-width) var(--base-shadow-blur) var(--nmorph-dark-shade-color),calc(-1 * var(--base-shadow-width)) calc(-1 * var(--base-shadow-width)) var(--base-shadow-blur) var(--nmorph-light-shade-color)}.nmorph-color-picker.nmorph--focused .nmorph-color-picker__value{color:var(--nmorph-focus-text-color)}.nmorph-color-picker.nmorph-color-picker--disabled{cursor:not-allowed;opacity:.6}.nmorph-color-picker.nmorph-color-picker--disabled .nmorph-color-picker__content{pointer-events:none}
+.nmorph-color-picker{display:inline-flex;flex:0 0 auto;flex-direction:column;align-items:flex-start;width:fit-content;max-width:100%}.nmorph-color-picker .nmorph-color-picker__content{position:relative;display:inline-flex;gap:var(--indentation-03);align-items:center;width:fit-content;max-width:100%;height:var(--nmorph-private-control-height);padding:0 var(--default-indentation-input);background:var(--nmorph-main-color);border-radius:var(--default-border-radius);box-shadow:inset var(--base-shadow-width) var(--base-shadow-width) var(--base-shadow-blur) var(--nmorph-dark-shade-color),inset calc(-1 * var(--base-shadow-width)) calc(-1 * var(--base-shadow-width)) var(--base-shadow-blur) var(--nmorph-light-shade-color)}.nmorph-color-picker .nmorph-color-picker__native{position:absolute;z-index:2;width:100%;height:100%;cursor:pointer;opacity:0;inset:0}.nmorph-color-picker .nmorph-color-picker__swatch{position:relative;z-index:1;flex:0 0 auto;width:calc(var(--nmorph-private-control-height) - var(--indentation-03) + 2px);height:calc(var(--nmorph-private-control-height) - var(--indentation-03) + 2px);overflow:hidden;background:var(--nmorph-main-color);border-radius:var(--default-border-radius);box-shadow:inset 0 0 0 1px #ffffff40,0 0 0 1px #0000001f;pointer-events:none}.nmorph-color-picker .nmorph-color-picker__swatch:before{content:"";position:absolute;z-index:1;inset:1px;background:var(--nmorph-private-color-picker-color);border-radius:calc(var(--default-border-radius) - 1px)}.nmorph-color-picker .nmorph-color-picker__value{flex:0 0 7ch;width:7ch;min-width:7ch;overflow:hidden;font-weight:var(--nmorph-private-control-font-weight);font-size:var(--nmorph-private-control-font-size);font-family:var(--font-family-mono);line-height:var(--nmorph-private-control-line-height);white-space:nowrap;text-overflow:ellipsis;transform:translateY(var(--nmorph-private-control-text-offset-y));user-select:none;font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}.nmorph-color-picker.nmorph-color-picker--rgb .nmorph-color-picker__value{flex-basis:18ch;width:18ch;min-width:18ch}.nmorph-color-picker.nmorph-color-picker--hsl .nmorph-color-picker__value{flex-basis:20ch;width:20ch;min-width:20ch}.nmorph-color-picker.nmorph--focused .nmorph-color-picker__content{background:var(--nmorph-accent-color);box-shadow:var(--base-shadow-width) var(--base-shadow-width) var(--base-shadow-blur) var(--nmorph-dark-shade-color),calc(-1 * var(--base-shadow-width)) calc(-1 * var(--base-shadow-width)) var(--base-shadow-blur) var(--nmorph-light-shade-color)}.nmorph-color-picker.nmorph--focused .nmorph-color-picker__value{color:var(--nmorph-focus-text-color)}.nmorph-color-picker.nmorph-color-picker--disabled{cursor:not-allowed;opacity:.6}.nmorph-color-picker.nmorph-color-picker--disabled .nmorph-color-picker__content{pointer-events:none}

package/dist/components/form/nmorph-color-picker/NmorphColorPicker.vue.js

@@ -1,8 +1,8 @@
 import './NmorphColorPicker.css';
 import a from "./NmorphColorPicker.vue2.js";
-import { openBlock as l, createElementBlock as i, normalizeClass as c, createElementVNode as n, normalizeStyle as t, toDisplayString as d, createCommentVNode as s } from "vue";
+import { openBlock as l, createElementBlock as i, normalizeClass as c, createElementVNode as n, normalizeStyle as t, toDisplayString as d, createCommentVNode as m } from "vue";
 /* empty css                       */
-import m from "../../../_virtual/_plugin-vue_export-helper.js";
+import s from "../../../_virtual/_plugin-vue_export-helper.js";
 const p = { class: "nmorph-color-picker__content" }, _ = ["id", "name", "tabindex", "value", "disabled"], h = {
   key: 0,
   class: "nmorph-color-picker__value"
@@ -32,7 +32,7 @@ function u(f, r, k, o, v, b) {
           "div",
           {
             class: "nmorph-color-picker__swatch",
-            style: t({ background: o.currentValue })
+            style: t({ "--nmorph-private-color-picker-color": o.currentValue })
           },
           null,
           4
@@ -44,14 +44,14 @@ function u(f, r, k, o, v, b) {
           d(o.displayValue),
           1
           /* TEXT */
-        )) : s("v-if", !0)
+        )) : m("v-if", !0)
       ])
     ],
     2
     /* CLASS */
   );
 }
-const C = /* @__PURE__ */ m(a, [["render", u], ["__file", "/builds/ketjo/nmorph/library/src/components/form/nmorph-color-picker/NmorphColorPicker.vue"]]);
+const C = /* @__PURE__ */ s(a, [["render", u], ["__file", "/builds/ketjo/nmorph/library/src/components/form/nmorph-color-picker/NmorphColorPicker.vue"]]);
 export {
   C as default
 };

package/dist/components/form/nmorph-time-picker/NmorphTimePicker.css

@@ -1 +1 @@
-.nmorph-time-picker{--nmorph-private-time-picker-width: fit-content;position:relative;display:inline-block;width:var(--nmorph-private-time-picker-width);min-width:0;height:var(--nmorph-private-control-height)}.nmorph-time-picker .nmorph-time-picker__input{display:inline-flex;gap:8px;align-items:center;box-sizing:border-box;width:100%;min-width:0;height:100%;padding:0 var(--default-indentation-input);overflow:hidden;background:var(--nmorph-main-color);border-radius:var(--default-border-radius);box-shadow:var(--nmorph-shadow-outset);cursor:pointer}.nmorph-time-picker .nmorph-time-picker__native{position:absolute;width:0;height:0;padding:0;border:0;opacity:0;pointer-events:none}.nmorph-time-picker .nmorph-time-picker__clock-icon{flex:0 0 auto}.nmorph-time-picker .nmorph-time-picker__selected-value{flex:0 1 auto;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;transform:translateY(var(--nmorph-private-control-text-offset-y))}.nmorph-time-picker .nmorph-time-picker__clear{display:inline-flex;flex:0 0 auto;justify-content:center;align-items:center;width:18px;height:18px;padding:0;color:var(--nmorph-text-color);background:transparent;border:0;cursor:pointer}.nmorph-time-picker.nmorph-time-picker--open .nmorph-time-picker__input{box-shadow:var(--nmorph-shadow-inset)}.nmorph-time-picker.nmorph-time-picker--focus{outline:2px solid var(--nmorph-accent-color)}.nmorph-time-picker.nmorph-time-picker--placeholder .nmorph-time-picker__selected-value{color:var(--nmorph-placeholder-text-color)}.nmorph-time-picker.nmorph-time-picker--disabled{cursor:not-allowed;opacity:.6}.nmorph-time-picker.nmorph-time-picker--disabled .nmorph-time-picker__input{pointer-events:none}.nmorph-time-picker__panel{display:grid;grid-template-columns:minmax(64px,1fr) 8px minmax(64px,1fr);gap:8px;align-items:start;box-sizing:border-box;width:100%;padding:10px;color:var(--nmorph-text-color)}.nmorph-time-picker__panel--with-seconds{grid-template-columns:minmax(64px,1fr) 8px minmax(64px,1fr) 8px minmax(64px,1fr)}.nmorph-time-picker__column{min-width:0;padding:4px;background:color-mix(in srgb,var(--nmorph-text-color) 4%,transparent);border-radius:var(--default-border-radius)}.nmorph-time-picker__column .nmorph-scroll{display:grid;grid-auto-flow:row;grid-template-columns:minmax(0,1fr)}.nmorph-time-picker__column .nmorph-scroll__viewport{padding:0 2px 0 0}.nmorph-time-picker__separator{display:flex;justify-content:center;align-items:flex-start;min-width:8px;padding-top:calc((var(--nmorph-private-control-height) - 1em) / 2 + 2px);color:var(--nmorph-semi-contrast-text-color);font-weight:var(--font-weight-bold);line-height:1}.nmorph-time-picker__option{width:100%;min-width:0}.nmorph-time-picker__option .nmorph-button__content{width:100%;min-width:0;padding-right:var(--indentation-02);padding-left:var(--indentation-02);background:transparent}.nmorph-time-picker__option.nmorph-button--plain .nmorph-button__content:not(:disabled,[loading=true]):hover{background:color-mix(in srgb,var(--nmorph-accent-color) 14%,transparent)}.nmorph-time-picker__option.nmorph-button.nmorph-button--active .nmorph-button__content{color:var(--nmorph-focus-text-color);background:var(--nmorph-accent-color);border-color:var(--nmorph-accent-color);box-shadow:none}.nmorph-time-picker__option.nmorph-button.nmorph-button--active .nmorph-button__content span,.nmorph-time-picker__option.nmorph-button.nmorph-button--active .nmorph-button__content .nmorph-icon{color:var(--nmorph-focus-text-color);--nmorph-private-icon-color: var(--nmorph-focus-text-color)}
+.nmorph-time-picker{--nmorph-private-time-picker-width: fit-content;position:relative;display:inline-block;width:var(--nmorph-private-time-picker-width);min-width:0;height:var(--nmorph-private-control-height)}.nmorph-time-picker .nmorph-time-picker__input{display:inline-flex;gap:8px;align-items:center;box-sizing:border-box;width:100%;min-width:0;height:100%;padding:0 var(--default-indentation-input);overflow:hidden;background:var(--nmorph-main-color);border-radius:var(--default-border-radius);box-shadow:var(--nmorph-shadow-outset);cursor:pointer}.nmorph-time-picker .nmorph-time-picker__native{position:absolute;width:0;height:0;padding:0;border:0;opacity:0;pointer-events:none}.nmorph-time-picker .nmorph-time-picker__clock-icon{flex:0 0 auto}.nmorph-time-picker .nmorph-time-picker__selected-value{flex:1 1 auto;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;transform:translateY(var(--nmorph-private-control-text-offset-y))}.nmorph-time-picker .nmorph-time-picker__clear{display:inline-flex;flex:0 0 auto;justify-content:flex-end;align-items:center;width:18px;height:18px;padding:0;color:var(--nmorph-text-color);background:transparent;border:0;cursor:pointer}.nmorph-time-picker .nmorph-time-picker__clear--hidden{opacity:0;pointer-events:none}.nmorph-time-picker.nmorph-time-picker--open .nmorph-time-picker__input{box-shadow:var(--nmorph-shadow-inset)}.nmorph-time-picker.nmorph-time-picker--focus{outline:2px solid var(--nmorph-accent-color)}.nmorph-time-picker.nmorph-time-picker--placeholder .nmorph-time-picker__selected-value{color:var(--nmorph-placeholder-text-color)}.nmorph-time-picker.nmorph-time-picker--disabled{cursor:not-allowed;opacity:.6}.nmorph-time-picker.nmorph-time-picker--disabled .nmorph-time-picker__input{pointer-events:none}.nmorph-time-picker__panel{display:grid;grid-template-columns:minmax(64px,1fr) 8px minmax(64px,1fr);gap:8px;align-items:start;box-sizing:border-box;width:100%;padding:10px;color:var(--nmorph-text-color)}.nmorph-time-picker__panel--with-seconds{grid-template-columns:minmax(64px,1fr) 8px minmax(64px,1fr) 8px minmax(64px,1fr)}.nmorph-time-picker__column{min-width:0;padding:4px;background:color-mix(in srgb,var(--nmorph-text-color) 4%,transparent);border-radius:var(--default-border-radius)}.nmorph-time-picker__column .nmorph-scroll{display:grid;grid-auto-flow:row;grid-template-columns:minmax(0,1fr)}.nmorph-time-picker__column .nmorph-scroll__viewport{padding:0 2px 0 0}.nmorph-time-picker__separator{display:flex;justify-content:center;align-items:flex-start;min-width:8px;padding-top:calc((var(--nmorph-private-control-height) - 1em) / 2 + 2px);color:var(--nmorph-semi-contrast-text-color);font-weight:var(--font-weight-bold);line-height:1}.nmorph-time-picker__option{width:100%;min-width:0}.nmorph-time-picker__option .nmorph-button__content{width:100%;min-width:0;padding-right:var(--indentation-02);padding-left:var(--indentation-02);background:transparent}.nmorph-time-picker__option.nmorph-button--plain .nmorph-button__content:not(:disabled,[loading=true]):hover{background:color-mix(in srgb,var(--nmorph-accent-color) 14%,transparent)}.nmorph-time-picker__option.nmorph-button.nmorph-button--active .nmorph-button__content{color:var(--nmorph-focus-text-color);background:var(--nmorph-accent-color);border-color:var(--nmorph-accent-color);box-shadow:none}.nmorph-time-picker__option.nmorph-button.nmorph-button--active .nmorph-button__content span,.nmorph-time-picker__option.nmorph-button.nmorph-button--active .nmorph-button__content .nmorph-icon{color:var(--nmorph-focus-text-color);--nmorph-private-icon-color: var(--nmorph-focus-text-color)}

package/dist/components/form/nmorph-time-picker/NmorphTimePicker.vue.js

@@ -1,30 +1,30 @@
 import './NmorphTimePicker.css';
-import v from "./NmorphTimePicker.vue2.js";
-import { openBlock as i, createElementBlock as a, normalizeStyle as b, normalizeClass as k, createElementVNode as o, withKeys as m, withModifiers as c, createVNode as n, withCtx as t, toDisplayString as x, createCommentVNode as p, createBlock as d, Fragment as s, renderList as h } from "vue";
+import b from "./NmorphTimePicker.vue2.js";
+import { openBlock as o, createElementBlock as d, normalizeStyle as v, normalizeClass as m, createElementVNode as l, withKeys as h, withModifiers as t, createVNode as n, withCtx as a, toDisplayString as x, createBlock as c, Fragment as s, renderList as p, createCommentVNode as k } from "vue";
 /* empty css                      */
 import f from "../../../_virtual/_plugin-vue_export-helper.js";
-const u = ["aria-expanded", "aria-controls", "tabindex", "onKeydown"], g = ["id", "name", "autocomplete", "step", "value", "disabled"], w = { class: "nmorph-time-picker__selected-value" }, y = ["id"], C = {
+const u = ["aria-expanded", "aria-controls", "tabindex", "onKeydown"], w = ["id", "name", "autocomplete", "step", "value", "disabled"], C = { class: "nmorph-time-picker__selected-value" }, g = ["disabled", "tabindex", "aria-hidden"], y = ["id"], N = {
   class: "nmorph-time-picker__column",
   role: "listbox",
   "aria-label": "Hours"
-}, N = {
+}, O = {
   class: "nmorph-time-picker__column",
   role: "listbox",
   "aria-label": "Minutes"
-}, O = {
+}, B = {
   class: "nmorph-time-picker__column",
   role: "listbox",
   "aria-label": "Seconds"
 };
-function H(S, r, B, e, V, I) {
-  return i(), a(
+function H(S, r, V, e, I, z) {
+  return o(), d(
     "div",
     {
-      class: k(e.modifiers),
-      style: b(e.styles)
+      class: m(e.modifiers),
+      style: v(e.styles)
     },
     [
-      o("div", {
+      l("div", {
         ref: "inputDOMRef",
         class: "nmorph-time-picker__input",
         role: "combobox",
@@ -32,15 +32,15 @@ function H(S, r, B, e, V, I) {
         "aria-controls": `${e.id}-dropdown`,
         tabindex: e.props.disabled ? -1 : e.tabindex,
         onClick: e.toggleOpen,
-        onFocus: r[0] || (r[0] = (...l) => e.focusHandler && e.focusHandler(...l)),
-        onBlur: r[1] || (r[1] = (...l) => e.blurHandler && e.blurHandler(...l)),
+        onFocus: r[0] || (r[0] = (...i) => e.focusHandler && e.focusHandler(...i)),
+        onBlur: r[1] || (r[1] = (...i) => e.blurHandler && e.blurHandler(...i)),
         onKeydown: [
-          m(c(e.toggleOpen, ["prevent"]), ["space"]),
-          m(c(e.toggleOpen, ["prevent"]), ["enter"]),
-          m(c(e.closeHandler, ["prevent"]), ["escape"])
+          h(t(e.toggleOpen, ["prevent"]), ["space"]),
+          h(t(e.toggleOpen, ["prevent"]), ["enter"]),
+          h(t(e.closeHandler, ["prevent"]), ["escape"])
         ]
       }, [
-        o("input", {
+        l("input", {
           id: e.id,
           class: "nmorph-time-picker__native",
           name: e.name,
@@ -50,41 +50,43 @@ function H(S, r, B, e, V, I) {
           value: e.modelValue || "",
           disabled: e.props.disabled,
           onInput: e.nativeInputHandler
-        }, null, 40, g),
+        }, null, 40, w),
         n(e.NmorphIcon, { class: "nmorph-time-picker__clock-icon" }, {
-          default: t(() => [
+          default: a(() => [
             n(e.NmorphIconClock)
           ]),
           _: 1
           /* STABLE */
         }),
-        o(
+        l(
           "div",
-          w,
+          C,
           x(e.displayValue),
           1
           /* TEXT */
         ),
-        e.showClearButton ? (i(), a("button", {
-          key: 0,
-          class: "nmorph-time-picker__clear",
+        l("button", {
+          class: m(["nmorph-time-picker__clear", { "nmorph-time-picker__clear--hidden": !e.showClearButton }]),
           type: "button",
+          disabled: !e.showClearButton,
+          tabindex: e.showClearButton ? 0 : -1,
+          "aria-hidden": !e.showClearButton,
           "aria-label": "Clear time",
-          onClick: c(e.clearHandler, ["stop"])
+          onClick: t(e.clearHandler, ["stop"])
         }, [
           n(e.NmorphIcon, {
             width: "14px",
             height: "14px"
           }, {
-            default: t(() => [
+            default: a(() => [
               n(e.NmorphIconCircleClose)
             ]),
             _: 1
             /* STABLE */
           })
-        ])) : p("v-if", !0)
+        ], 10, g)
       ], 40, u),
-      e.inputDOMRef && !e.props.disabled ? (i(), d(e.NmorphDropdown, {
+      e.inputDOMRef && !e.props.disabled ? (o(), c(e.NmorphDropdown, {
         key: 0,
         open: e.open,
         "relative-element": e.inputDOMRef,
@@ -95,31 +97,31 @@ function H(S, r, B, e, V, I) {
         onOnOutsideClick: e.closeHandler,
         onOnEscapeKeydown: e.closeHandler
       }, {
-        default: t(() => [
-          o("div", {
+        default: a(() => [
+          l("div", {
             id: `${e.id}-dropdown`,
-            class: k(["nmorph-time-picker__panel", { "nmorph-time-picker__panel--with-seconds": e.props.showSeconds }])
+            class: m(["nmorph-time-picker__panel", { "nmorph-time-picker__panel--with-seconds": e.props.showSeconds }])
           }, [
-            o("div", C, [
+            l("div", N, [
               n(e.NmorphScroll, {
                 height: "210px",
                 gap: 6,
                 "scroll-x-prop": "hidden",
                 "css-scroll-behavior": "auto"
               }, {
-                default: t(() => [
-                  (i(!0), a(
+                default: a(() => [
+                  (o(!0), d(
                     s,
                     null,
-                    h(e.hourOptions, (l) => (i(), d(e.NmorphButton, {
-                      key: l.value,
+                    p(e.hourOptions, (i) => (o(), c(e.NmorphButton, {
+                      key: i.value,
                       class: "nmorph-time-picker__option",
                       design: "plain",
-                      text: l.label,
+                      text: i.label,
                       thickness: e.props.thickness,
-                      active: l.value === e.pickerValue.hour,
-                      disabled: l.disabled,
-                      onClick: (_) => e.selectUnit("hour", l.value)
+                      active: i.value === e.pickerValue.hour,
+                      disabled: i.disabled,
+                      onClick: (_) => e.selectUnit("hour", i.value)
                     }, null, 8, ["text", "thickness", "active", "disabled", "onClick"]))),
                     128
                     /* KEYED_FRAGMENT */
@@ -129,33 +131,33 @@ function H(S, r, B, e, V, I) {
                 /* STABLE */
               })
             ]),
-            r[3] || (r[3] = o(
+            r[3] || (r[3] = l(
               "div",
               { class: "nmorph-time-picker__separator" },
               ":",
               -1
               /* CACHED */
             )),
-            o("div", N, [
+            l("div", O, [
               n(e.NmorphScroll, {
                 height: "210px",
                 gap: 6,
                 "scroll-x-prop": "hidden",
                 "css-scroll-behavior": "auto"
               }, {
-                default: t(() => [
-                  (i(!0), a(
+                default: a(() => [
+                  (o(!0), d(
                     s,
                     null,
-                    h(e.minuteOptions, (l) => (i(), d(e.NmorphButton, {
-                      key: l.value,
+                    p(e.minuteOptions, (i) => (o(), c(e.NmorphButton, {
+                      key: i.value,
                       class: "nmorph-time-picker__option",
                       design: "plain",
-                      text: l.label,
+                      text: i.label,
                       thickness: e.props.thickness,
-                      active: l.value === e.pickerValue.minute,
-                      disabled: l.disabled,
-                      onClick: (_) => e.selectUnit("minute", l.value)
+                      active: i.value === e.pickerValue.minute,
+                      disabled: i.disabled,
+                      onClick: (_) => e.selectUnit("minute", i.value)
                     }, null, 8, ["text", "thickness", "active", "disabled", "onClick"]))),
                     128
                     /* KEYED_FRAGMENT */
@@ -165,37 +167,37 @@ function H(S, r, B, e, V, I) {
                 /* STABLE */
               })
             ]),
-            e.props.showSeconds ? (i(), a(
+            e.props.showSeconds ? (o(), d(
               s,
               { key: 0 },
               [
-                r[2] || (r[2] = o(
+                r[2] || (r[2] = l(
                   "div",
                   { class: "nmorph-time-picker__separator" },
                   ":",
                   -1
                   /* CACHED */
                 )),
-                o("div", O, [
+                l("div", B, [
                   n(e.NmorphScroll, {
                     height: "210px",
                     gap: 6,
                     "scroll-x-prop": "hidden",
                     "css-scroll-behavior": "auto"
                   }, {
-                    default: t(() => [
-                      (i(!0), a(
+                    default: a(() => [
+                      (o(!0), d(
                         s,
                         null,
-                        h(e.secondOptions, (l) => (i(), d(e.NmorphButton, {
-                          key: l.value,
+                        p(e.secondOptions, (i) => (o(), c(e.NmorphButton, {
+                          key: i.value,
                           class: "nmorph-time-picker__option",
                           design: "plain",
-                          text: l.label,
+                          text: i.label,
                           thickness: e.props.thickness,
-                          active: l.value === e.pickerValue.second,
-                          disabled: l.disabled,
-                          onClick: (_) => e.selectUnit("second", l.value)
+                          active: i.value === e.pickerValue.second,
+                          disabled: i.disabled,
+                          onClick: (_) => e.selectUnit("second", i.value)
                         }, null, 8, ["text", "thickness", "active", "disabled", "onClick"]))),
                         128
                         /* KEYED_FRAGMENT */
@@ -208,18 +210,18 @@ function H(S, r, B, e, V, I) {
               ],
               64
               /* STABLE_FRAGMENT */
-            )) : p("v-if", !0)
+            )) : k("v-if", !0)
           ], 10, y)
         ]),
         _: 1
         /* STABLE */
-      }, 8, ["open", "relative-element", "width", "z-index", "aria-label"])) : p("v-if", !0)
+      }, 8, ["open", "relative-element", "width", "z-index", "aria-label"])) : k("v-if", !0)
     ],
     6
     /* CLASS, STYLE */
   );
 }
-const E = /* @__PURE__ */ f(v, [["render", H], ["__file", "/builds/ketjo/nmorph/library/src/components/form/nmorph-time-picker/NmorphTimePicker.vue"]]);
+const R = /* @__PURE__ */ f(b, [["render", H], ["__file", "/builds/ketjo/nmorph/library/src/components/form/nmorph-time-picker/NmorphTimePicker.vue"]]);
 export {
-  E as default
+  R as default
 };

package/dist/components/navigation/nmorph-stepper/NmorphStepper.css

@@ -1 +1 @@
-.nmorph-stepper{width:100%;border-radius:var(--default-border-radius)}.nmorph-stepper.nmorph-stepper--interactive{cursor:grab}.nmorph-stepper.nmorph-stepper--disabled{cursor:not-allowed;opacity:.6}.nmorph-stepper:focus-visible{outline:2px solid var(--nmorph-accent-color);outline-offset:2px}.nmorph-stepper__viewport{width:100%;overflow:hidden;border-radius:inherit;touch-action:pan-y}.nmorph-stepper__track{display:flex;width:100%;min-width:0;transition:transform .24s ease;will-change:transform}.nmorph-stepper__track>*{flex:0 0 100%;width:100%;min-width:100%;max-width:100%}.nmorph-stepper__indicator{width:100%}
+.nmorph-stepper{width:100%;border-radius:var(--default-border-radius)}.nmorph-stepper.nmorph-stepper--interactive{cursor:grab}.nmorph-stepper.nmorph-stepper--disabled{cursor:not-allowed;opacity:.6}.nmorph-stepper:focus-visible{outline:2px solid var(--nmorph-accent-color);outline-offset:2px}.nmorph-stepper__viewport{width:100%;overflow:hidden;border-radius:inherit;touch-action:pan-y}.nmorph-stepper__track{display:flex;width:100%;min-width:0;transition:transform .24s ease;will-change:transform}.nmorph-stepper__track>*{flex:0 0 100%;width:100%;min-width:100%;max-width:100%}.nmorph-stepper__indicator{width:100%}.nmorph-stepper__indicator .nmorph-button.nmorph-button--plain.nmorph-button--icon-only .nmorph-button__content,.nmorph-stepper__indicator .nmorph-button.nmorph-button--plain.nmorph-button--icon-only .nmorph-button__content:not(:disabled,[loading=true]):hover{border:none}

package/dist/components/navigation/nmorph-tabs/NmorphTabs.css

@@ -1 +1 @@
-.nmorph-tabs{border-radius:var(--default-border-radius)}.nmorph-tabs .nmorph-tabs__label-list{display:flex;padding:var(--indentation-02);background:var(--nmorph-main-color);border-top-left-radius:var(--default-border-radius);border-top-right-radius:var(--default-border-radius);box-shadow:var(--base-shadow-width) var(--base-shadow-width) var(--base-shadow-blur) var(--nmorph-dark-shade-color),calc(-1 * var(--base-shadow-width)) calc(-1 * var(--base-shadow-width)) var(--base-shadow-blur) var(--nmorph-light-shade-color)}.nmorph-tabs .nmorph-tabs__label{margin-right:var(--indentation-02);padding:var(--indentation-03);background:var(--nmorph-main-color);border-radius:var(--default-border-radius);box-shadow:var(--base-shadow-width) var(--base-shadow-width) var(--base-shadow-blur) var(--nmorph-dark-shade-color),calc(-1 * var(--base-shadow-width)) calc(-1 * var(--base-shadow-width)) var(--base-shadow-blur) var(--nmorph-light-shade-color);cursor:pointer}.nmorph-tabs .nmorph-tabs__label.nmorph-tabs__label--disabled{cursor:not-allowed;opacity:.6}.nmorph-tabs .nmorph-tabs__label.nmorph-tabs__label--selected{background:var(--nmorph-main-color);box-shadow:inset var(--base-shadow-width) var(--base-shadow-width) var(--base-shadow-blur) var(--nmorph-dark-shade-color),inset calc(-1 * var(--base-shadow-width)) calc(-1 * var(--base-shadow-width)) var(--base-shadow-blur) var(--nmorph-light-shade-color)}.nmorph-tabs .nmorph-tabs__content__wrapper{padding:var(--indentation-02);background:var(--nmorph-main-color);border-bottom-right-radius:var(--default-border-radius);border-bottom-left-radius:var(--default-border-radius);box-shadow:var(--base-shadow-width) var(--base-shadow-width) var(--base-shadow-blur) var(--nmorph-dark-shade-color),calc(-1 * var(--base-shadow-width)) calc(-1 * var(--base-shadow-width)) var(--base-shadow-blur) var(--nmorph-light-shade-color)}.nmorph-tabs .nmorph-tabs__content{padding:var(--indentation-03);background:var(--nmorph-main-color);border-radius:var(--default-border-radius);box-shadow:inset var(--base-shadow-width) var(--base-shadow-width) var(--base-shadow-blur) var(--nmorph-dark-shade-color),inset calc(-1 * var(--base-shadow-width)) calc(-1 * var(--base-shadow-width)) var(--base-shadow-blur) var(--nmorph-light-shade-color)}.nmorph-tabs.nmorph-tabs--stretch .nmorph-tabs__label{width:100%}
+.nmorph-tabs{--nmorph-private-tabs-wall-width: var(--indentation-01);border-radius:var(--default-border-radius)}.nmorph-tabs .nmorph-tabs__label-list{display:flex;padding:var(--nmorph-private-tabs-wall-width);background:var(--nmorph-main-color);border-top-left-radius:var(--default-border-radius);border-top-right-radius:var(--default-border-radius);box-shadow:var(--base-shadow-width) var(--base-shadow-width) var(--base-shadow-blur) var(--nmorph-dark-shade-color),calc(-1 * var(--base-shadow-width)) calc(-1 * var(--base-shadow-width)) var(--base-shadow-blur) var(--nmorph-light-shade-color)}.nmorph-tabs .nmorph-tabs__label{margin-right:var(--indentation-02);padding:var(--indentation-03);background:var(--nmorph-main-color);border-radius:var(--default-border-radius);box-shadow:var(--base-shadow-width) var(--base-shadow-width) var(--base-shadow-blur) var(--nmorph-dark-shade-color),calc(-1 * var(--base-shadow-width)) calc(-1 * var(--base-shadow-width)) var(--base-shadow-blur) var(--nmorph-light-shade-color);cursor:pointer}.nmorph-tabs .nmorph-tabs__label.nmorph-tabs__label--disabled{cursor:not-allowed;opacity:.6}.nmorph-tabs .nmorph-tabs__label.nmorph-tabs__label--selected{background:var(--nmorph-main-color);box-shadow:inset var(--base-shadow-width) var(--base-shadow-width) var(--base-shadow-blur) var(--nmorph-dark-shade-color),inset calc(-1 * var(--base-shadow-width)) calc(-1 * var(--base-shadow-width)) var(--base-shadow-blur) var(--nmorph-light-shade-color)}.nmorph-tabs .nmorph-tabs__content__wrapper{padding:var(--nmorph-private-tabs-wall-width);background:var(--nmorph-main-color);border-bottom-right-radius:var(--default-border-radius);border-bottom-left-radius:var(--default-border-radius);box-shadow:var(--base-shadow-width) var(--base-shadow-width) var(--base-shadow-blur) var(--nmorph-dark-shade-color),calc(-1 * var(--base-shadow-width)) calc(-1 * var(--base-shadow-width)) var(--base-shadow-blur) var(--nmorph-light-shade-color)}.nmorph-tabs .nmorph-tabs__content{padding:var(--indentation-03);background:var(--nmorph-main-color);border-radius:var(--default-border-radius);box-shadow:inset var(--base-shadow-width) var(--base-shadow-width) var(--base-shadow-blur) var(--nmorph-dark-shade-color),inset calc(-1 * var(--base-shadow-width)) calc(-1 * var(--base-shadow-width)) var(--base-shadow-blur) var(--nmorph-light-shade-color)}.nmorph-tabs.nmorph-tabs--stretch .nmorph-tabs__label{width:100%}