@kong-ui-public/sandbox-layout 2.8.7 → 2.8.8-pr.4063.bf809a10e.0

package/dist/sandbox-layout.es.js

@@ -1,291 +1,224 @@
-import { defineComponent as y, inject as G, resolveComponent as v, openBlock as n, createElementBlock as l, unref as c, Fragment as K, renderList as M, createVNode as s, withCtx as h, createTextVNode as A, toDisplayString as b, createCommentVNode as u, ref as C, computed as D, effectScope as H, watch as W, isRef as I, createElementVNode as o, createBlock as $, normalizeClass as X, resolveDynamicComponent as P, useCssVars as R, provide as Y, renderSlot as k } from "vue";
-import { DarkModeIcon as F, LightModeIcon as Z, MenuIcon as j, CogIcon as q } from "@kong/icons";
-const L = "kong-ui-sandbox-layout-links", U = "kong-ui-sandbox-theme", J = "mono-lime-day", Q = [
-  { label: "Mono lime", value: "mono-lime" },
-  { label: "Electric lime", value: "electric-lime" }
-], ee = [
-  { label: "Day", value: "day" },
-  { label: "Night", value: "night" }
-], te = {
-  key: 0,
-  class: "kong-ui-sandbox-navigation"
-}, oe = /* @__PURE__ */ y({
-  __name: "SandboxNavigation",
-  emits: ["router-link-click"],
-  setup(e, { emit: i }) {
-    const r = i, t = G(L, []);
-    return (g, f) => {
-      const a = v("router-link");
-      return n(), l("nav", null, [
-        c(t).length ? (n(), l("ul", te, [
-          (n(!0), l(K, null, M(c(t), (_) => (n(), l("li", {
-            key: _.name,
-            class: "sandbox-link"
-          }, [
-            s(a, {
-              to: _.to,
-              onClick: (p) => r("router-link-click", _)
-            }, {
-              default: h(() => [
-                A(b(_.name), 1)
-              ]),
-              _: 2
-            }, 1032, ["to", "onClick"])
-          ]))), 128))
-        ])) : u("", !0)
-      ]);
-    };
-  }
-}), S = (e, i) => {
-  const r = e.__vccOpts || e;
-  for (const [t, g] of i)
-    r[t] = g;
-  return r;
-}, N = /* @__PURE__ */ S(oe, [["__scopeId", "data-v-f67e3d83"]]), ne = "16px", O = "24px";
-function le(e) {
-  return {
-    family: e.startsWith("electric-lime") ? "electric-lime" : "mono-lime",
-    mode: e.includes("night") ? "night" : "day",
-    highContrast: e.endsWith("high-contrast")
-  };
+import { Fragment as e, computed as t, createBlock as n, createCommentVNode as r, createElementBlock as i, createElementVNode as a, createTextVNode as o, createVNode as s, defineComponent as c, effectScope as l, inject as u, isRef as d, normalizeClass as f, openBlock as p, provide as m, ref as h, renderList as g, renderSlot as _, resolveComponent as v, resolveDynamicComponent as y, toDisplayString as b, unref as x, useCssVars as ee, watch as te, withCtx as S } from "vue";
+import { CogIcon as C, DarkModeIcon as w, LightModeIcon as T, MenuIcon as E } from "@kong/icons";
+// src/constants.ts
+var D = "kong-ui-sandbox-layout-links", O = "kong-ui-sandbox-theme", k = "mono-lime-day", A = [{
+	label: "Mono lime",
+	value: "mono-lime"
+}, {
+	label: "Electric lime",
+	value: "electric-lime"
+}], j = [{
+	label: "Day",
+	value: "day"
+}, {
+	label: "Night",
+	value: "night"
+}], M = {
+	key: 0,
+	class: "kong-ui-sandbox-navigation"
+}, N = /*@__PURE__*/ c({
+	__name: "SandboxNavigation",
+	emits: ["router-link-click"],
+	setup(t, { emit: n }) {
+		let a = n, c = u(D, []);
+		return (t, n) => {
+			let l = v("router-link");
+			return p(), i("nav", null, [x(c).length ? (p(), i("ul", M, [(p(!0), i(e, null, g(x(c), (e) => (p(), i("li", {
+				key: e.name,
+				class: "sandbox-link"
+			}, [s(l, {
+				to: e.to,
+				onClick: (t) => a("router-link-click", e)
+			}, {
+				default: S(() => [o(b(e.name), 1)]),
+				_: 2
+			}, 1032, ["to", "onClick"])]))), 128))])) : r("", !0)]);
+		};
+	}
+}), P = (e, t) => {
+	let n = e.__vccOpts || e;
+	for (let [e, r] of t) n[e] = r;
+	return n;
+}, F = /*#__PURE__*/ P(N, [["__scopeId", "data-v-f67e3d83"]]), I = "16px", L = "24px";
+// src/composables/useSandboxTheme.ts
+function R(e) {
+	return {
+		family: e.startsWith("electric-lime") ? "electric-lime" : "mono-lime",
+		mode: e.includes("night") ? "night" : "day",
+		highContrast: e.endsWith("high-contrast")
+	};
 }
-function se(e, i, r) {
-  return r ? `${e}-${i}-high-contrast` : `${e}-${i}`;
+function z(e, t, n) {
+	return n ? `${e}-${t}-high-contrast` : `${e}-${t}`;
 }
-const T = le(
-  localStorage.getItem(U) || J
-), V = C(T.family), z = C(T.mode), B = C(T.highContrast), w = D(() => se(V.value, z.value, B.value));
-let x = !1;
-function ie() {
-  x || (x = !0, H(!0).run(() => {
-    W(w, (e) => {
-      document.documentElement.setAttribute("data-kui-theme", e), localStorage.setItem(U, e);
-    }, { immediate: !0 });
-  }));
+var B = R(localStorage.getItem("kong-ui-sandbox-theme") || "mono-lime-day"), V = h(B.family), H = h(B.mode), U = h(B.highContrast), W = t(() => z(V.value, H.value, U.value)), G = !1;
+function K() {
+	G || (G = !0, l(!0).run(() => {
+		te(W, (e) => {
+			document.documentElement.setAttribute("data-kui-theme", e), localStorage.setItem(O, e);
+		}, { immediate: !0 });
+	}));
 }
-function ae() {
-  return ie(), { theme: w, family: V, mode: z, highContrast: B };
+function q() {
+	return K(), {
+		theme: W,
+		family: V,
+		mode: H,
+		highContrast: U
+	};
 }
-const ce = { class: "kong-ui-sandbox-theme-picker" }, re = { class: "theme-picker-row" }, de = {
-  "aria-label": "Theme",
-  class: "theme-picker-group",
-  role: "radiogroup"
-}, ue = ["aria-label", "checked", "value", "onChange"], _e = { class: "theme-picker-row" }, me = /* @__PURE__ */ y({
-  __name: "SandboxThemePicker",
-  setup(e) {
-    const { family: i, mode: r, highContrast: t } = ae(), g = {
-      day: Z,
-      night: F
-    };
-    return (f, a) => {
-      const _ = v("KSegmentedControl"), p = v("KTooltip"), m = v("KInputSwitch");
-      return n(), l("div", ce, [
-        s(_, {
-          modelValue: c(i),
-          "onUpdate:modelValue": a[0] || (a[0] = (d) => I(i) ? i.value = d : null),
-          "aria-label": "Theme family",
-          options: c(Q)
-        }, null, 8, ["modelValue", "options"]),
-        o("div", re, [
-          a[2] || (a[2] = o("span", { class: "theme-picker-label" }, "Theme", -1)),
-          o("div", de, [
-            (n(!0), l(K, null, M(c(ee), (d) => (n(), $(p, {
-              key: d.value,
-              placement: "top",
-              text: d.label
-            }, {
-              default: h(() => [
-                o("label", {
-                  class: X(["theme-picker-option", { active: d.value === c(r) }])
-                }, [
-                  o("input", {
-                    "aria-label": d.label,
-                    checked: d.value === c(r),
-                    class: "theme-picker-input",
-                    name: "sandbox-theme-mode",
-                    type: "radio",
-                    value: d.value,
-                    onChange: (Ae) => r.value = d.value
-                  }, null, 40, ue),
-                  (n(), $(P(g[d.value]), {
-                    decorative: "",
-                    size: `var(--kui-icon-size-30, ${c(ne)})`
-                  }, null, 8, ["size"]))
-                ], 2)
-              ]),
-              _: 2
-            }, 1032, ["text"]))), 128))
-          ])
-        ]),
-        o("div", _e, [
-          a[3] || (a[3] = o("span", { class: "theme-picker-label" }, "High contrast", -1)),
-          s(m, {
-            modelValue: c(t),
-            "onUpdate:modelValue": a[1] || (a[1] = (d) => I(t) ? t.value = d : null),
-            "aria-label": "High contrast"
-          }, null, 8, ["modelValue"])
-        ])
-      ]);
-    };
-  }
-}), E = /* @__PURE__ */ S(me, [["__scopeId", "data-v-942c4583"]]), he = { class: "kong-ui-sandbox-layout" }, ve = { class: "header" }, pe = { class: "header-left" }, ge = { class: "mobile-nav-container" }, ke = { class: "toggle-mobile-nav" }, fe = {
-  key: 0,
-  class: "nav-theme-picker"
-}, be = {
-  key: 1,
-  class: "navigation-after"
-}, ye = {
-  key: 0,
-  class: "mobile-title"
-}, Ce = { class: "header-right" }, Se = {
-  key: 0,
-  class: "mobile-controls-container"
-}, Te = { class: "toggle-mobile-controls" }, Ie = { class: "layout" }, $e = { class: "desktop-nav-container" }, Ne = {
-  key: 0,
-  class: "nav-theme-picker"
-}, Oe = {
-  key: 1,
-  class: "navigation-after"
-}, xe = { class: "sandbox-container" }, Ee = { key: 0 }, Ke = {
-  key: 0,
-  class: "sandbox-controls"
-}, Me = /* @__PURE__ */ y({
-  __name: "SandboxLayout",
-  props: {
-    title: {
-      type: String,
-      default: ""
-    },
-    links: {
-      type: Array,
-      required: !1,
-      default: () => []
-    },
-    controlsMinWidth: {
-      type: Number,
-      default: 240
-    },
-    /** Whether to apply a Kong theme to the sandbox and render the theme picker in the navigation. Set to `false` to leave the sandbox un-themed. */
-    applyTheming: {
-      type: Boolean,
-      default: !0
-    }
-  },
-  setup(e) {
-    R((t) => ({
-      v62569402: r.value
-    }));
-    const i = e;
-    Y(L, i.links);
-    const r = D(() => `${i.controlsMinWidth}px`);
-    return (t, g) => {
-      const f = v("KSlideout"), a = v("KToggle"), _ = v("router-link");
-      return n(), l("div", he, [
-        o("header", ve, [
-          o("div", pe, [
-            o("div", ge, [
-              s(a, null, {
-                default: h(({ isToggled: p, toggle: m }) => [
-                  o("div", null, [
-                    o("div", ke, [
-                      s(c(j), {
-                        role: "button",
-                        size: `var(--kui-icon-size-50, ${c(O)})`,
-                        title: "Toggle menu",
-                        onClick: m
-                      }, null, 8, ["size", "onClick"])
-                    ]),
-                    s(f, {
-                      title: "Main Menu",
-                      visible: p.value,
-                      onClose: m
-                    }, {
-                      default: h(() => [
-                        e.applyTheming ? (n(), l("div", fe, [
-                          s(E)
-                        ])) : u("", !0),
-                        s(N, { onRouterLinkClick: m }, null, 8, ["onRouterLinkClick"]),
-                        t.$slots["navigation-after"] ? (n(), l("div", be, [
-                          k(t.$slots, "navigation-after", {}, void 0, !0)
-                        ])) : u("", !0)
-                      ]),
-                      _: 2
-                    }, 1032, ["visible", "onClose"])
-                  ])
-                ]),
-                _: 3
-              }),
-              e.title ? (n(), l("h1", ye, [
-                s(_, {
-                  class: "home-link",
-                  to: { name: "home" }
-                }, {
-                  default: h(() => [
-                    A(b(e.title), 1)
-                  ]),
-                  _: 1
-                })
-              ])) : u("", !0)
-            ])
-          ]),
-          o("div", Ce, [
-            t.$slots.controls ? (n(), l("div", Se, [
-              s(a, null, {
-                default: h(({ isToggled: p, toggle: m }) => [
-                  o("div", null, [
-                    o("div", Te, [
-                      s(c(q), {
-                        role: "button",
-                        size: `var(--kui-icon-size-50, ${c(O)})`,
-                        title: "Toggle controls",
-                        onClick: m
-                      }, null, 8, ["size", "onClick"])
-                    ]),
-                    s(f, {
-                      title: "Controls",
-                      visible: p.value,
-                      onClose: m
-                    }, {
-                      default: h(() => [
-                        k(t.$slots, "controls", {}, void 0, !0)
-                      ]),
-                      _: 3
-                    }, 8, ["visible", "onClose"])
-                  ])
-                ]),
-                _: 3
-              })
-            ])) : u("", !0)
-          ])
-        ]),
-        o("div", Ie, [
-          o("div", $e, [
-            e.applyTheming ? (n(), l("div", Ne, [
-              s(E)
-            ])) : u("", !0),
-            s(N),
-            t.$slots["navigation-after"] ? (n(), l("div", Oe, [
-              k(t.$slots, "navigation-after", {}, void 0, !0)
-            ])) : u("", !0)
-          ]),
-          o("div", xe, [
-            e.title ? (n(), l("h1", Ee, b(e.title), 1)) : u("", !0),
-            k(t.$slots, "default", {}, void 0, !0)
-          ]),
-          t.$slots.controls ? (n(), l("div", Ke, [
-            k(t.$slots, "controls", {}, void 0, !0)
-          ])) : u("", !0)
-        ])
-      ]);
-    };
-  }
-}), Ue = /* @__PURE__ */ S(Me, [["__scopeId", "data-v-e36d58ea"]]);
-export {
-  J as KONG_UI_SANDBOX_DEFAULT_THEME,
-  L as KONG_UI_SANDBOX_LAYOUT_LINKS_INJECTION_KEY,
-  Q as KONG_UI_SANDBOX_THEME_FAMILY_OPTIONS,
-  ee as KONG_UI_SANDBOX_THEME_MODE_OPTIONS,
-  U as KONG_UI_SANDBOX_THEME_STORAGE_KEY,
-  Ue as SandboxLayout,
-  E as SandboxThemePicker
-};
+// src/components/SandboxThemePicker.vue?vue&type=script&setup=true&lang.ts
+var J = { class: "kong-ui-sandbox-theme-picker" }, Y = { class: "theme-picker-row" }, ne = {
+	"aria-label": "Theme",
+	class: "theme-picker-group",
+	role: "radiogroup"
+}, X = [
+	"aria-label",
+	"checked",
+	"value",
+	"onChange"
+], Z = { class: "theme-picker-row" }, Q = /*#__PURE__*/ P(/* @__PURE__ */ c({
+	__name: "SandboxThemePicker",
+	setup(t) {
+		let { family: r, mode: o, highContrast: c } = q(), l = {
+			day: T,
+			night: w
+		};
+		return (t, u) => {
+			let m = v("KSegmentedControl"), h = v("KTooltip"), _ = v("KInputSwitch");
+			return p(), i("div", J, [
+				s(m, {
+					modelValue: x(r),
+					"onUpdate:modelValue": u[0] ||= (e) => d(r) ? r.value = e : null,
+					"aria-label": "Theme family",
+					options: x(A)
+				}, null, 8, ["modelValue", "options"]),
+				a("div", Y, [u[2] ||= a("span", { class: "theme-picker-label" }, "Theme", -1), a("div", ne, [(p(!0), i(e, null, g(x(j), (e) => (p(), n(h, {
+					key: e.value,
+					placement: "top",
+					text: e.label
+				}, {
+					default: S(() => [a("label", { class: f(["theme-picker-option", { active: e.value === x(o) }]) }, [a("input", {
+						"aria-label": e.label,
+						checked: e.value === x(o),
+						class: "theme-picker-input",
+						name: "sandbox-theme-mode",
+						type: "radio",
+						value: e.value,
+						onChange: (t) => o.value = e.value
+					}, null, 40, X), (p(), n(y(l[e.value]), {
+						decorative: "",
+						size: `var(--kui-icon-size-30, ${x(I)})`
+					}, null, 8, ["size"]))], 2)]),
+					_: 2
+				}, 1032, ["text"]))), 128))])]),
+				a("div", Z, [u[3] ||= a("span", { class: "theme-picker-label" }, "High contrast", -1), s(_, {
+					modelValue: x(c),
+					"onUpdate:modelValue": u[1] ||= (e) => d(c) ? c.value = e : null,
+					"aria-label": "High contrast"
+				}, null, 8, ["modelValue"])])
+			]);
+		};
+	}
+}), [["__scopeId", "data-v-942c4583"]]), re = { class: "kong-ui-sandbox-layout" }, ie = { class: "header" }, ae = { class: "header-left" }, oe = { class: "mobile-nav-container" }, se = { class: "toggle-mobile-nav" }, ce = {
+	key: 0,
+	class: "nav-theme-picker"
+}, le = {
+	key: 1,
+	class: "navigation-after"
+}, ue = {
+	key: 0,
+	class: "mobile-title"
+}, de = { class: "header-right" }, $ = {
+	key: 0,
+	class: "mobile-controls-container"
+}, fe = { class: "toggle-mobile-controls" }, pe = { class: "layout" }, me = { class: "desktop-nav-container" }, he = {
+	key: 0,
+	class: "nav-theme-picker"
+}, ge = {
+	key: 1,
+	class: "navigation-after"
+}, _e = { class: "sandbox-container" }, ve = { key: 0 }, ye = {
+	key: 0,
+	class: "sandbox-controls"
+}, be = /*#__PURE__*/ P(/* @__PURE__ */ c({
+	__name: "SandboxLayout",
+	props: {
+		title: {
+			type: String,
+			default: ""
+		},
+		links: {
+			type: Array,
+			required: !1,
+			default: () => []
+		},
+		controlsMinWidth: {
+			type: Number,
+			default: 240
+		},
+		applyTheming: {
+			type: Boolean,
+			default: !0
+		}
+	},
+	setup(e) {
+		ee((e) => ({ v62569402: c.value }));
+		let n = e;
+		m(D, n.links);
+		let c = t(() => `${n.controlsMinWidth}px`);
+		return (t, n) => {
+			let c = v("KSlideout"), l = v("KToggle"), u = v("router-link");
+			return p(), i("div", re, [a("header", ie, [a("div", ae, [a("div", oe, [s(l, null, {
+				default: S(({ isToggled: n, toggle: o }) => [a("div", null, [a("div", se, [s(x(E), {
+					role: "button",
+					size: `var(--kui-icon-size-50, ${x(L)})`,
+					title: "Toggle menu",
+					onClick: o
+				}, null, 8, ["size", "onClick"])]), s(c, {
+					title: "Main Menu",
+					visible: n.value,
+					onClose: o
+				}, {
+					default: S(() => [
+						e.applyTheming ? (p(), i("div", ce, [s(Q)])) : r("", !0),
+						s(F, { onRouterLinkClick: o }, null, 8, ["onRouterLinkClick"]),
+						t.$slots["navigation-after"] ? (p(), i("div", le, [_(t.$slots, "navigation-after", {}, void 0, !0)])) : r("", !0)
+					]),
+					_: 2
+				}, 1032, ["visible", "onClose"])])]),
+				_: 3
+			}), e.title ? (p(), i("h1", ue, [s(u, {
+				class: "home-link",
+				to: { name: "home" }
+			}, {
+				default: S(() => [o(b(e.title), 1)]),
+				_: 1
+			})])) : r("", !0)])]), a("div", de, [t.$slots.controls ? (p(), i("div", $, [s(l, null, {
+				default: S(({ isToggled: e, toggle: n }) => [a("div", null, [a("div", fe, [s(x(C), {
+					role: "button",
+					size: `var(--kui-icon-size-50, ${x(L)})`,
+					title: "Toggle controls",
+					onClick: n
+				}, null, 8, ["size", "onClick"])]), s(c, {
+					title: "Controls",
+					visible: e.value,
+					onClose: n
+				}, {
+					default: S(() => [_(t.$slots, "controls", {}, void 0, !0)]),
+					_: 3
+				}, 8, ["visible", "onClose"])])]),
+				_: 3
+			})])) : r("", !0)])]), a("div", pe, [
+				a("div", me, [
+					e.applyTheming ? (p(), i("div", he, [s(Q)])) : r("", !0),
+					s(F),
+					t.$slots["navigation-after"] ? (p(), i("div", ge, [_(t.$slots, "navigation-after", {}, void 0, !0)])) : r("", !0)
+				]),
+				a("div", _e, [e.title ? (p(), i("h1", ve, b(e.title), 1)) : r("", !0), _(t.$slots, "default", {}, void 0, !0)]),
+				t.$slots.controls ? (p(), i("div", ye, [_(t.$slots, "controls", {}, void 0, !0)])) : r("", !0)
+			])]);
+		};
+	}
+}), [["__scopeId", "data-v-e36d58ea"]]);
+export { k as KONG_UI_SANDBOX_DEFAULT_THEME, D as KONG_UI_SANDBOX_LAYOUT_LINKS_INJECTION_KEY, A as KONG_UI_SANDBOX_THEME_FAMILY_OPTIONS, j as KONG_UI_SANDBOX_THEME_MODE_OPTIONS, O as KONG_UI_SANDBOX_THEME_STORAGE_KEY, be as SandboxLayout, Q as SandboxThemePicker };

package/dist/sandbox-layout.umd.js

@@ -1 +1 @@
-(function(n,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue"),require("@kong/icons")):typeof define=="function"&&define.amd?define(["exports","vue","@kong/icons"],e):(n=typeof globalThis<"u"?globalThis:n||self,e(n["kong-ui-public-sandbox-layout"]={},n.Vue,n.KongIcons))})(this,(function(n,e,_){"use strict";const k="kong-ui-sandbox-layout-links",p="kong-ui-sandbox-theme",E="mono-lime-day",C=[{label:"Mono lime",value:"mono-lime"},{label:"Electric lime",value:"electric-lime"}],S=[{label:"Day",value:"day"},{label:"Night",value:"night"}],I={key:0,class:"kong-ui-sandbox-navigation"},K=e.defineComponent({__name:"SandboxNavigation",emits:["router-link-click"],setup(t,{emit:l}){const c=l,o=e.inject(k,[]);return(m,h)=>{const a=e.resolveComponent("router-link");return e.openBlock(),e.createElementBlock("nav",null,[e.unref(o).length?(e.openBlock(),e.createElementBlock("ul",I,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(o),s=>(e.openBlock(),e.createElementBlock("li",{key:s.name,class:"sandbox-link"},[e.createVNode(a,{to:s.to,onClick:d=>c("router-link-click",s)},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(s.name),1)]),_:2},1032,["to","onClick"])]))),128))])):e.createCommentVNode("",!0)])}}}),N=(t,l)=>{const c=t.__vccOpts||t;for(const[o,m]of l)c[o]=m;return c},V=N(K,[["__scopeId","data-v-f67e3d83"]]),$="16px",b="24px";function x(t){return{family:t.startsWith("electric-lime")?"electric-lime":"mono-lime",mode:t.includes("night")?"night":"day",highContrast:t.endsWith("high-contrast")}}function A(t,l,c){return c?`${t}-${l}-high-contrast`:`${t}-${l}`}const f=x(localStorage.getItem(p)||E),y=e.ref(f.family),T=e.ref(f.mode),B=e.ref(f.highContrast),O=e.computed(()=>A(y.value,T.value,B.value));let u=!1;function D(){u||(u=!0,e.effectScope(!0).run(()=>{e.watch(O,t=>{document.documentElement.setAttribute("data-kui-theme",t),localStorage.setItem(p,t)},{immediate:!0})}))}function M(){return D(),{theme:O,family:y,mode:T,highContrast:B}}const U={class:"kong-ui-sandbox-theme-picker"},L={class:"theme-picker-row"},w={"aria-label":"Theme",class:"theme-picker-group",role:"radiogroup"},G=["aria-label","checked","value","onChange"],z={class:"theme-picker-row"},g=N(e.defineComponent({__name:"SandboxThemePicker",setup(t){const{family:l,mode:c,highContrast:o}=M(),m={day:_.LightModeIcon,night:_.DarkModeIcon};return(h,a)=>{const s=e.resolveComponent("KSegmentedControl"),d=e.resolveComponent("KTooltip"),r=e.resolveComponent("KInputSwitch");return e.openBlock(),e.createElementBlock("div",U,[e.createVNode(s,{modelValue:e.unref(l),"onUpdate:modelValue":a[0]||(a[0]=i=>e.isRef(l)?l.value=i:null),"aria-label":"Theme family",options:e.unref(C)},null,8,["modelValue","options"]),e.createElementVNode("div",L,[a[2]||(a[2]=e.createElementVNode("span",{class:"theme-picker-label"},"Theme",-1)),e.createElementVNode("div",w,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(S),i=>(e.openBlock(),e.createBlock(d,{key:i.value,placement:"top",text:i.label},{default:e.withCtx(()=>[e.createElementVNode("label",{class:e.normalizeClass(["theme-picker-option",{active:i.value===e.unref(c)}])},[e.createElementVNode("input",{"aria-label":i.label,checked:i.value===e.unref(c),class:"theme-picker-input",name:"sandbox-theme-mode",type:"radio",value:i.value,onChange:se=>c.value=i.value},null,40,G),(e.openBlock(),e.createBlock(e.resolveDynamicComponent(m[i.value]),{decorative:"",size:`var(--kui-icon-size-30, ${e.unref($)})`},null,8,["size"]))],2)]),_:2},1032,["text"]))),128))])]),e.createElementVNode("div",z,[a[3]||(a[3]=e.createElementVNode("span",{class:"theme-picker-label"},"High contrast",-1)),e.createVNode(r,{modelValue:e.unref(o),"onUpdate:modelValue":a[1]||(a[1]=i=>e.isRef(o)?o.value=i:null),"aria-label":"High contrast"},null,8,["modelValue"])])])}}}),[["__scopeId","data-v-942c4583"]]),H={class:"kong-ui-sandbox-layout"},X={class:"header"},P={class:"header-left"},Y={class:"mobile-nav-container"},F={class:"toggle-mobile-nav"},R={key:0,class:"nav-theme-picker"},W={key:1,class:"navigation-after"},j={key:0,class:"mobile-title"},q={class:"header-right"},J={key:0,class:"mobile-controls-container"},Z={class:"toggle-mobile-controls"},Q={class:"layout"},v={class:"desktop-nav-container"},ee={key:0,class:"nav-theme-picker"},te={key:1,class:"navigation-after"},oe={class:"sandbox-container"},ne={key:0},le={key:0,class:"sandbox-controls"},ae=N(e.defineComponent({__name:"SandboxLayout",props:{title:{type:String,default:""},links:{type:Array,required:!1,default:()=>[]},controlsMinWidth:{type:Number,default:240},applyTheming:{type:Boolean,default:!0}},setup(t){e.useCssVars(o=>({v62569402:c.value}));const l=t;e.provide(k,l.links);const c=e.computed(()=>`${l.controlsMinWidth}px`);return(o,m)=>{const h=e.resolveComponent("KSlideout"),a=e.resolveComponent("KToggle"),s=e.resolveComponent("router-link");return e.openBlock(),e.createElementBlock("div",H,[e.createElementVNode("header",X,[e.createElementVNode("div",P,[e.createElementVNode("div",Y,[e.createVNode(a,null,{default:e.withCtx(({isToggled:d,toggle:r})=>[e.createElementVNode("div",null,[e.createElementVNode("div",F,[e.createVNode(e.unref(_.MenuIcon),{role:"button",size:`var(--kui-icon-size-50, ${e.unref(b)})`,title:"Toggle menu",onClick:r},null,8,["size","onClick"])]),e.createVNode(h,{title:"Main Menu",visible:d.value,onClose:r},{default:e.withCtx(()=>[t.applyTheming?(e.openBlock(),e.createElementBlock("div",R,[e.createVNode(g)])):e.createCommentVNode("",!0),e.createVNode(V,{onRouterLinkClick:r},null,8,["onRouterLinkClick"]),o.$slots["navigation-after"]?(e.openBlock(),e.createElementBlock("div",W,[e.renderSlot(o.$slots,"navigation-after",{},void 0,!0)])):e.createCommentVNode("",!0)]),_:2},1032,["visible","onClose"])])]),_:3}),t.title?(e.openBlock(),e.createElementBlock("h1",j,[e.createVNode(s,{class:"home-link",to:{name:"home"}},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(t.title),1)]),_:1})])):e.createCommentVNode("",!0)])]),e.createElementVNode("div",q,[o.$slots.controls?(e.openBlock(),e.createElementBlock("div",J,[e.createVNode(a,null,{default:e.withCtx(({isToggled:d,toggle:r})=>[e.createElementVNode("div",null,[e.createElementVNode("div",Z,[e.createVNode(e.unref(_.CogIcon),{role:"button",size:`var(--kui-icon-size-50, ${e.unref(b)})`,title:"Toggle controls",onClick:r},null,8,["size","onClick"])]),e.createVNode(h,{title:"Controls",visible:d.value,onClose:r},{default:e.withCtx(()=>[e.renderSlot(o.$slots,"controls",{},void 0,!0)]),_:3},8,["visible","onClose"])])]),_:3})])):e.createCommentVNode("",!0)])]),e.createElementVNode("div",Q,[e.createElementVNode("div",v,[t.applyTheming?(e.openBlock(),e.createElementBlock("div",ee,[e.createVNode(g)])):e.createCommentVNode("",!0),e.createVNode(V),o.$slots["navigation-after"]?(e.openBlock(),e.createElementBlock("div",te,[e.renderSlot(o.$slots,"navigation-after",{},void 0,!0)])):e.createCommentVNode("",!0)]),e.createElementVNode("div",oe,[t.title?(e.openBlock(),e.createElementBlock("h1",ne,e.toDisplayString(t.title),1)):e.createCommentVNode("",!0),e.renderSlot(o.$slots,"default",{},void 0,!0)]),o.$slots.controls?(e.openBlock(),e.createElementBlock("div",le,[e.renderSlot(o.$slots,"controls",{},void 0,!0)])):e.createCommentVNode("",!0)])])}}}),[["__scopeId","data-v-e36d58ea"]]);n.KONG_UI_SANDBOX_DEFAULT_THEME=E,n.KONG_UI_SANDBOX_LAYOUT_LINKS_INJECTION_KEY=k,n.KONG_UI_SANDBOX_THEME_FAMILY_OPTIONS=C,n.KONG_UI_SANDBOX_THEME_MODE_OPTIONS=S,n.KONG_UI_SANDBOX_THEME_STORAGE_KEY=p,n.SandboxLayout=ae,n.SandboxThemePicker=g,Object.defineProperty(n,Symbol.toStringTag,{value:"Module"})}));
+(function(e,t){typeof exports==`object`&&typeof module<`u`?t(exports,require("vue"),require("@kong/icons")):typeof define==`function`&&define.amd?define([`exports`,`vue`,`@kong/icons`],t):(e=typeof globalThis<`u`?globalThis:e||self,t(e[`kong-ui-public-sandbox-layout`]={},e.Vue,e.KongIcons))})(this,function(e,t,n){Object.defineProperty(e,Symbol.toStringTag,{value:`Module`});var r=`kong-ui-sandbox-layout-links`,i=`kong-ui-sandbox-theme`,a=`mono-lime-day`,o=[{label:`Mono lime`,value:`mono-lime`},{label:`Electric lime`,value:`electric-lime`}],s=[{label:`Day`,value:`day`},{label:`Night`,value:`night`}],c={key:0,class:`kong-ui-sandbox-navigation`},l=(0,t.defineComponent)({__name:`SandboxNavigation`,emits:[`router-link-click`],setup(e,{emit:n}){let i=n,a=(0,t.inject)(r,[]);return(e,n)=>{let r=(0,t.resolveComponent)(`router-link`);return(0,t.openBlock)(),(0,t.createElementBlock)(`nav`,null,[(0,t.unref)(a).length?((0,t.openBlock)(),(0,t.createElementBlock)(`ul`,c,[((0,t.openBlock)(!0),(0,t.createElementBlock)(t.Fragment,null,(0,t.renderList)((0,t.unref)(a),e=>((0,t.openBlock)(),(0,t.createElementBlock)(`li`,{key:e.name,class:`sandbox-link`},[(0,t.createVNode)(r,{to:e.to,onClick:t=>i(`router-link-click`,e)},{default:(0,t.withCtx)(()=>[(0,t.createTextVNode)((0,t.toDisplayString)(e.name),1)]),_:2},1032,[`to`,`onClick`])]))),128))])):(0,t.createCommentVNode)(``,!0)])}}}),u=(e,t)=>{let n=e.__vccOpts||e;for(let[e,r]of t)n[e]=r;return n},d=u(l,[[`__scopeId`,`data-v-f67e3d83`]]),f=`16px`,p=`24px`;function m(e){return{family:e.startsWith(`electric-lime`)?`electric-lime`:`mono-lime`,mode:e.includes(`night`)?`night`:`day`,highContrast:e.endsWith(`high-contrast`)}}function h(e,t,n){return n?`${e}-${t}-high-contrast`:`${e}-${t}`}var g=m(localStorage.getItem(`kong-ui-sandbox-theme`)||`mono-lime-day`),_=(0,t.ref)(g.family),v=(0,t.ref)(g.mode),y=(0,t.ref)(g.highContrast),b=(0,t.computed)(()=>h(_.value,v.value,y.value)),x=!1;function S(){x||(x=!0,(0,t.effectScope)(!0).run(()=>{(0,t.watch)(b,e=>{document.documentElement.setAttribute(`data-kui-theme`,e),localStorage.setItem(i,e)},{immediate:!0})}))}function C(){return S(),{theme:b,family:_,mode:v,highContrast:y}}var w={class:`kong-ui-sandbox-theme-picker`},T={class:`theme-picker-row`},E={"aria-label":`Theme`,class:`theme-picker-group`,role:`radiogroup`},D=[`aria-label`,`checked`,`value`,`onChange`],O={class:`theme-picker-row`},k=u((0,t.defineComponent)({__name:`SandboxThemePicker`,setup(e){let{family:r,mode:i,highContrast:a}=C(),c={day:n.LightModeIcon,night:n.DarkModeIcon};return(e,n)=>{let l=(0,t.resolveComponent)(`KSegmentedControl`),u=(0,t.resolveComponent)(`KTooltip`),d=(0,t.resolveComponent)(`KInputSwitch`);return(0,t.openBlock)(),(0,t.createElementBlock)(`div`,w,[(0,t.createVNode)(l,{modelValue:(0,t.unref)(r),"onUpdate:modelValue":n[0]||=e=>(0,t.isRef)(r)?r.value=e:null,"aria-label":`Theme family`,options:(0,t.unref)(o)},null,8,[`modelValue`,`options`]),(0,t.createElementVNode)(`div`,T,[n[2]||=(0,t.createElementVNode)(`span`,{class:`theme-picker-label`},`Theme`,-1),(0,t.createElementVNode)(`div`,E,[((0,t.openBlock)(!0),(0,t.createElementBlock)(t.Fragment,null,(0,t.renderList)((0,t.unref)(s),e=>((0,t.openBlock)(),(0,t.createBlock)(u,{key:e.value,placement:`top`,text:e.label},{default:(0,t.withCtx)(()=>[(0,t.createElementVNode)(`label`,{class:(0,t.normalizeClass)([`theme-picker-option`,{active:e.value===(0,t.unref)(i)}])},[(0,t.createElementVNode)(`input`,{"aria-label":e.label,checked:e.value===(0,t.unref)(i),class:`theme-picker-input`,name:`sandbox-theme-mode`,type:`radio`,value:e.value,onChange:t=>i.value=e.value},null,40,D),((0,t.openBlock)(),(0,t.createBlock)((0,t.resolveDynamicComponent)(c[e.value]),{decorative:``,size:`var(--kui-icon-size-30, ${(0,t.unref)(f)})`},null,8,[`size`]))],2)]),_:2},1032,[`text`]))),128))])]),(0,t.createElementVNode)(`div`,O,[n[3]||=(0,t.createElementVNode)(`span`,{class:`theme-picker-label`},`High contrast`,-1),(0,t.createVNode)(d,{modelValue:(0,t.unref)(a),"onUpdate:modelValue":n[1]||=e=>(0,t.isRef)(a)?a.value=e:null,"aria-label":`High contrast`},null,8,[`modelValue`])])])}}}),[[`__scopeId`,`data-v-942c4583`]]),A={class:`kong-ui-sandbox-layout`},j={class:`header`},M={class:`header-left`},N={class:`mobile-nav-container`},P={class:`toggle-mobile-nav`},F={key:0,class:`nav-theme-picker`},I={key:1,class:`navigation-after`},L={key:0,class:`mobile-title`},R={class:`header-right`},z={key:0,class:`mobile-controls-container`},B={class:`toggle-mobile-controls`},V={class:`layout`},H={class:`desktop-nav-container`},U={key:0,class:`nav-theme-picker`},W={key:1,class:`navigation-after`},G={class:`sandbox-container`},K={key:0},q={key:0,class:`sandbox-controls`},J=u((0,t.defineComponent)({__name:`SandboxLayout`,props:{title:{type:String,default:``},links:{type:Array,required:!1,default:()=>[]},controlsMinWidth:{type:Number,default:240},applyTheming:{type:Boolean,default:!0}},setup(e){(0,t.useCssVars)(e=>({v62569402:a.value}));let i=e;(0,t.provide)(r,i.links);let a=(0,t.computed)(()=>`${i.controlsMinWidth}px`);return(r,i)=>{let a=(0,t.resolveComponent)(`KSlideout`),o=(0,t.resolveComponent)(`KToggle`),s=(0,t.resolveComponent)(`router-link`);return(0,t.openBlock)(),(0,t.createElementBlock)(`div`,A,[(0,t.createElementVNode)(`header`,j,[(0,t.createElementVNode)(`div`,M,[(0,t.createElementVNode)(`div`,N,[(0,t.createVNode)(o,null,{default:(0,t.withCtx)(({isToggled:i,toggle:o})=>[(0,t.createElementVNode)(`div`,null,[(0,t.createElementVNode)(`div`,P,[(0,t.createVNode)((0,t.unref)(n.MenuIcon),{role:`button`,size:`var(--kui-icon-size-50, ${(0,t.unref)(p)})`,title:`Toggle menu`,onClick:o},null,8,[`size`,`onClick`])]),(0,t.createVNode)(a,{title:`Main Menu`,visible:i.value,onClose:o},{default:(0,t.withCtx)(()=>[e.applyTheming?((0,t.openBlock)(),(0,t.createElementBlock)(`div`,F,[(0,t.createVNode)(k)])):(0,t.createCommentVNode)(``,!0),(0,t.createVNode)(d,{onRouterLinkClick:o},null,8,[`onRouterLinkClick`]),r.$slots[`navigation-after`]?((0,t.openBlock)(),(0,t.createElementBlock)(`div`,I,[(0,t.renderSlot)(r.$slots,`navigation-after`,{},void 0,!0)])):(0,t.createCommentVNode)(``,!0)]),_:2},1032,[`visible`,`onClose`])])]),_:3}),e.title?((0,t.openBlock)(),(0,t.createElementBlock)(`h1`,L,[(0,t.createVNode)(s,{class:`home-link`,to:{name:`home`}},{default:(0,t.withCtx)(()=>[(0,t.createTextVNode)((0,t.toDisplayString)(e.title),1)]),_:1})])):(0,t.createCommentVNode)(``,!0)])]),(0,t.createElementVNode)(`div`,R,[r.$slots.controls?((0,t.openBlock)(),(0,t.createElementBlock)(`div`,z,[(0,t.createVNode)(o,null,{default:(0,t.withCtx)(({isToggled:e,toggle:i})=>[(0,t.createElementVNode)(`div`,null,[(0,t.createElementVNode)(`div`,B,[(0,t.createVNode)((0,t.unref)(n.CogIcon),{role:`button`,size:`var(--kui-icon-size-50, ${(0,t.unref)(p)})`,title:`Toggle controls`,onClick:i},null,8,[`size`,`onClick`])]),(0,t.createVNode)(a,{title:`Controls`,visible:e.value,onClose:i},{default:(0,t.withCtx)(()=>[(0,t.renderSlot)(r.$slots,`controls`,{},void 0,!0)]),_:3},8,[`visible`,`onClose`])])]),_:3})])):(0,t.createCommentVNode)(``,!0)])]),(0,t.createElementVNode)(`div`,V,[(0,t.createElementVNode)(`div`,H,[e.applyTheming?((0,t.openBlock)(),(0,t.createElementBlock)(`div`,U,[(0,t.createVNode)(k)])):(0,t.createCommentVNode)(``,!0),(0,t.createVNode)(d),r.$slots[`navigation-after`]?((0,t.openBlock)(),(0,t.createElementBlock)(`div`,W,[(0,t.renderSlot)(r.$slots,`navigation-after`,{},void 0,!0)])):(0,t.createCommentVNode)(``,!0)]),(0,t.createElementVNode)(`div`,G,[e.title?((0,t.openBlock)(),(0,t.createElementBlock)(`h1`,K,(0,t.toDisplayString)(e.title),1)):(0,t.createCommentVNode)(``,!0),(0,t.renderSlot)(r.$slots,`default`,{},void 0,!0)]),r.$slots.controls?((0,t.openBlock)(),(0,t.createElementBlock)(`div`,q,[(0,t.renderSlot)(r.$slots,`controls`,{},void 0,!0)])):(0,t.createCommentVNode)(``,!0)])])}}}),[[`__scopeId`,`data-v-e36d58ea`]]);e.KONG_UI_SANDBOX_DEFAULT_THEME=a,e.KONG_UI_SANDBOX_LAYOUT_LINKS_INJECTION_KEY=r,e.KONG_UI_SANDBOX_THEME_FAMILY_OPTIONS=o,e.KONG_UI_SANDBOX_THEME_MODE_OPTIONS=s,e.KONG_UI_SANDBOX_THEME_STORAGE_KEY=i,e.SandboxLayout=J,e.SandboxThemePicker=k});