@kong-ui-public/sandbox-layout 2.8.0 → 2.8.1-pr.3948.a10ca59e2.0

package/dist/sandbox-layout.es.js

@@ -1,30 +1,33 @@
-import { defineComponent as f, inject as B, resolveComponent as k, openBlock as n, createElementBlock as l, unref as c, Fragment as x, renderList as N, createVNode as i, withCtx as m, createTextVNode as O, toDisplayString as b, createCommentVNode as u, ref as E, computed as K, effectScope as V, watch as w, createElementVNode as t, createBlock as C, normalizeClass as G, resolveDynamicComponent as H, isRef as R, useCssVars as W, provide as X, renderSlot as g } from "vue";
-import { DarkModeIcon as P, LightModeIcon as Y, MenuIcon as F, CogIcon as Z } from "@kong/icons";
-const D = "kong-ui-sandbox-layout-links", z = "kong-ui-sandbox-theme", j = "electric-lime-day", q = [
+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" }
-], J = {
+], te = {
   key: 0,
   class: "kong-ui-sandbox-navigation"
-}, Q = /* @__PURE__ */ f({
+}, oe = /* @__PURE__ */ y({
   __name: "SandboxNavigation",
   emits: ["router-link-click"],
-  setup(e, { emit: a }) {
-    const r = a, o = B(D, []);
-    return (p, d) => {
-      const v = k("router-link");
+  setup(e, { emit: i }) {
+    const r = i, t = G(L, []);
+    return (g, f) => {
+      const a = v("router-link");
       return n(), l("nav", null, [
-        c(o).length ? (n(), l("ul", J, [
-          (n(!0), l(x, null, N(c(o), (_) => (n(), l("li", {
+        c(t).length ? (n(), l("ul", te, [
+          (n(!0), l(K, null, M(c(t), (_) => (n(), l("li", {
             key: _.name,
             class: "sandbox-link"
           }, [
-            i(v, {
+            s(a, {
               to: _.to,
-              onClick: (s) => r("router-link-click", _)
+              onClick: (p) => r("router-link-click", _)
             }, {
-              default: m(() => [
-                O(b(_.name), 1)
+              default: h(() => [
+                A(b(_.name), 1)
               ]),
               _: 2
             }, 1032, ["to", "onClick"])
@@ -33,73 +36,80 @@ const D = "kong-ui-sandbox-layout-links", z = "kong-ui-sandbox-theme", j = "elec
       ]);
     };
   }
-}), y = (e, a) => {
+}), S = (e, i) => {
   const r = e.__vccOpts || e;
-  for (const [o, p] of a)
-    r[o] = p;
+  for (const [t, g] of i)
+    r[t] = g;
   return r;
-}, S = /* @__PURE__ */ y(Q, [["__scopeId", "data-v-f67e3d83"]]), ee = "16px", T = "24px";
-function te(e) {
+}, 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")
   };
 }
-function oe(e, a) {
-  return a ? `electric-lime-${e}-high-contrast` : `electric-lime-${e}`;
+function se(e, i, r) {
+  return r ? `${e}-${i}-high-contrast` : `${e}-${i}`;
 }
-const A = te(
-  localStorage.getItem(z) || j
-), L = E(A.mode), M = E(A.highContrast), U = K(() => oe(L.value, M.value));
-let I = !1;
-function ne() {
-  I || (I = !0, V(!0).run(() => {
-    w(U, (e) => {
-      document.documentElement.setAttribute("data-kui-theme", e), localStorage.setItem(z, e);
+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 });
   }));
 }
-function se() {
-  return ne(), { theme: U, mode: L, highContrast: M };
+function ae() {
+  return ie(), { theme: w, family: V, mode: z, highContrast: B };
 }
-const le = { class: "kong-ui-sandbox-theme-picker" }, ie = { class: "theme-picker-row" }, ae = {
+const ce = { class: "kong-ui-sandbox-theme-picker" }, re = { class: "theme-picker-row" }, de = {
   "aria-label": "Theme",
   class: "theme-picker-group",
   role: "radiogroup"
-}, ce = ["aria-label", "checked", "value", "onChange"], re = { class: "theme-picker-row" }, de = /* @__PURE__ */ f({
+}, ue = ["aria-label", "checked", "value", "onChange"], _e = { class: "theme-picker-row" }, me = /* @__PURE__ */ y({
   __name: "SandboxThemePicker",
   setup(e) {
-    const { mode: a, highContrast: r } = se(), o = {
-      day: Y,
-      night: P
+    const { family: i, mode: r, highContrast: t } = ae(), g = {
+      day: Z,
+      night: F
     };
-    return (p, d) => {
-      const v = k("KTooltip"), _ = k("KInputSwitch");
-      return n(), l("div", le, [
-        t("div", ie, [
-          d[1] || (d[1] = t("span", { class: "theme-picker-label" }, "Theme", -1)),
-          t("div", ae, [
-            (n(!0), l(x, null, N(c(q), (s) => (n(), C(v, {
-              key: s.value,
+    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: s.label
+              text: d.label
             }, {
-              default: m(() => [
-                t("label", {
-                  class: G(["theme-picker-option", { active: s.value === c(a) }])
+              default: h(() => [
+                o("label", {
+                  class: X(["theme-picker-option", { active: d.value === c(r) }])
                 }, [
-                  t("input", {
-                    "aria-label": s.label,
-                    checked: s.value === c(a),
+                  o("input", {
+                    "aria-label": d.label,
+                    checked: d.value === c(r),
                     class: "theme-picker-input",
                     name: "sandbox-theme-mode",
                     type: "radio",
-                    value: s.value,
-                    onChange: (h) => a.value = s.value
-                  }, null, 40, ce),
-                  (n(), C(H(o[s.value]), {
+                    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(ee)})`
+                    size: `var(--kui-icon-size-30, ${c(ne)})`
                   }, null, 8, ["size"]))
                 ], 2)
               ]),
@@ -107,39 +117,39 @@ const le = { class: "kong-ui-sandbox-theme-picker" }, ie = { class: "theme-picke
             }, 1032, ["text"]))), 128))
           ])
         ]),
-        t("div", re, [
-          d[2] || (d[2] = t("span", { class: "theme-picker-label" }, "High contrast", -1)),
-          i(_, {
-            modelValue: c(r),
-            "onUpdate:modelValue": d[0] || (d[0] = (s) => R(r) ? r.value = s : null),
+        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"])
         ])
       ]);
     };
   }
-}), $ = /* @__PURE__ */ y(de, [["__scopeId", "data-v-d7ba3b0d"]]), ue = { class: "kong-ui-sandbox-layout" }, _e = { class: "header" }, he = { class: "header-left" }, me = { class: "mobile-nav-container" }, ve = { class: "toggle-mobile-nav" }, ke = {
+}), 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"
-}, ge = {
+}, be = {
   key: 1,
   class: "navigation-after"
-}, pe = {
+}, ye = {
   key: 0,
   class: "mobile-title"
-}, be = { class: "header-right" }, fe = {
+}, Ce = { class: "header-right" }, Se = {
   key: 0,
   class: "mobile-controls-container"
-}, ye = { class: "toggle-mobile-controls" }, Ce = { class: "layout" }, Se = { class: "desktop-nav-container" }, Te = {
+}, Te = { class: "toggle-mobile-controls" }, Ie = { class: "layout" }, $e = { class: "desktop-nav-container" }, Ne = {
   key: 0,
   class: "nav-theme-picker"
-}, Ie = {
+}, Oe = {
   key: 1,
   class: "navigation-after"
-}, $e = { class: "sandbox-container" }, xe = { key: 0 }, Ne = {
+}, xe = { class: "sandbox-container" }, Ee = { key: 0 }, Ke = {
   key: 0,
   class: "sandbox-controls"
-}, Oe = /* @__PURE__ */ f({
+}, Me = /* @__PURE__ */ y({
   __name: "SandboxLayout",
   props: {
     title: {
@@ -162,41 +172,41 @@ const le = { class: "kong-ui-sandbox-theme-picker" }, ie = { class: "theme-picke
     }
   },
   setup(e) {
-    W((o) => ({
+    R((t) => ({
       v62569402: r.value
     }));
-    const a = e;
-    X(D, a.links);
-    const r = K(() => `${a.controlsMinWidth}px`);
-    return (o, p) => {
-      const d = k("KSlideout"), v = k("KToggle"), _ = k("router-link");
-      return n(), l("div", ue, [
-        t("header", _e, [
-          t("div", he, [
-            t("div", me, [
-              i(v, null, {
-                default: m(({ isToggled: s, toggle: h }) => [
-                  t("div", null, [
-                    t("div", ve, [
-                      i(c(F), {
+    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(T)})`,
+                        size: `var(--kui-icon-size-50, ${c(O)})`,
                         title: "Toggle menu",
-                        onClick: h
+                        onClick: m
                       }, null, 8, ["size", "onClick"])
                     ]),
-                    i(d, {
+                    s(f, {
                       title: "Main Menu",
-                      visible: s.value,
-                      onClose: h
+                      visible: p.value,
+                      onClose: m
                     }, {
-                      default: m(() => [
-                        e.applyTheming ? (n(), l("div", ke, [
-                          i($)
+                      default: h(() => [
+                        e.applyTheming ? (n(), l("div", fe, [
+                          s(E)
                         ])) : u("", !0),
-                        i(S, { onRouterLinkClick: h }, null, 8, ["onRouterLinkClick"]),
-                        o.$slots["navigation-after"] ? (n(), l("div", ge, [
-                          g(o.$slots, "navigation-after", {}, void 0, !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
@@ -205,39 +215,39 @@ const le = { class: "kong-ui-sandbox-theme-picker" }, ie = { class: "theme-picke
                 ]),
                 _: 3
               }),
-              e.title ? (n(), l("h1", pe, [
-                i(_, {
+              e.title ? (n(), l("h1", ye, [
+                s(_, {
                   class: "home-link",
                   to: { name: "home" }
                 }, {
-                  default: m(() => [
-                    O(b(e.title), 1)
+                  default: h(() => [
+                    A(b(e.title), 1)
                   ]),
                   _: 1
                 })
               ])) : u("", !0)
             ])
           ]),
-          t("div", be, [
-            o.$slots.controls ? (n(), l("div", fe, [
-              i(v, null, {
-                default: m(({ isToggled: s, toggle: h }) => [
-                  t("div", null, [
-                    t("div", ye, [
-                      i(c(Z), {
+          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(T)})`,
+                        size: `var(--kui-icon-size-50, ${c(O)})`,
                         title: "Toggle controls",
-                        onClick: h
+                        onClick: m
                       }, null, 8, ["size", "onClick"])
                     ]),
-                    i(d, {
+                    s(f, {
                       title: "Controls",
-                      visible: s.value,
-                      onClose: h
+                      visible: p.value,
+                      onClose: m
                     }, {
-                      default: m(() => [
-                        g(o.$slots, "controls", {}, void 0, !0)
+                      default: h(() => [
+                        k(t.$slots, "controls", {}, void 0, !0)
                       ]),
                       _: 3
                     }, 8, ["visible", "onClose"])
@@ -248,33 +258,34 @@ const le = { class: "kong-ui-sandbox-theme-picker" }, ie = { class: "theme-picke
             ])) : u("", !0)
           ])
         ]),
-        t("div", Ce, [
-          t("div", Se, [
-            e.applyTheming ? (n(), l("div", Te, [
-              i($)
+        o("div", Ie, [
+          o("div", $e, [
+            e.applyTheming ? (n(), l("div", Ne, [
+              s(E)
             ])) : u("", !0),
-            i(S),
-            o.$slots["navigation-after"] ? (n(), l("div", Ie, [
-              g(o.$slots, "navigation-after", {}, void 0, !0)
+            s(N),
+            t.$slots["navigation-after"] ? (n(), l("div", Oe, [
+              k(t.$slots, "navigation-after", {}, void 0, !0)
             ])) : u("", !0)
           ]),
-          t("div", $e, [
-            e.title ? (n(), l("h1", xe, b(e.title), 1)) : u("", !0),
-            g(o.$slots, "default", {}, void 0, !0)
+          o("div", xe, [
+            e.title ? (n(), l("h1", Ee, b(e.title), 1)) : u("", !0),
+            k(t.$slots, "default", {}, void 0, !0)
           ]),
-          o.$slots.controls ? (n(), l("div", Ne, [
-            g(o.$slots, "controls", {}, void 0, !0)
+          t.$slots.controls ? (n(), l("div", Ke, [
+            k(t.$slots, "controls", {}, void 0, !0)
           ])) : u("", !0)
         ])
       ]);
     };
   }
-}), De = /* @__PURE__ */ y(Oe, [["__scopeId", "data-v-e36d58ea"]]);
+}), Ue = /* @__PURE__ */ S(Me, [["__scopeId", "data-v-e36d58ea"]]);
 export {
-  j as KONG_UI_SANDBOX_DEFAULT_THEME,
-  D as KONG_UI_SANDBOX_LAYOUT_LINKS_INJECTION_KEY,
-  q as KONG_UI_SANDBOX_THEME_MODE_OPTIONS,
-  z as KONG_UI_SANDBOX_THEME_STORAGE_KEY,
-  De as SandboxLayout,
-  $ as SandboxThemePicker
+  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
 };

package/dist/sandbox-layout.umd.js

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