@kong-ui-public/sandbox-layout 2.4.22 → 2.4.23-pr.3477.a6d47be95.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,27 +1,27 @@
1
- import { defineComponent as y, inject as N, resolveComponent as k, openBlock as s, createElementBlock as l, unref as u, Fragment as T, renderList as $, createVNode as e, withCtx as d, createTextVNode as x, toDisplayString as f, createCommentVNode as _, useCssVars as K, provide as L, computed as O, createElementVNode as o, renderSlot as p } from "vue";
2
- import { MenuIcon as E, CogIcon as V } from "@kong/icons";
3
- const S = "kong-ui-sandbox-layout-links", z = {
1
+ import { defineComponent as y, inject as N, resolveComponent as m, openBlock as s, createElementBlock as l, unref as u, Fragment as $, renderList as T, createVNode as t, withCtx as d, createTextVNode as x, toDisplayString as b, createCommentVNode as _, useCssVars as K, provide as L, computed as z, createElementVNode as e, renderSlot as p } from "vue";
2
+ import { MenuIcon as O, CogIcon as E } from "@kong/icons";
3
+ const S = "kong-ui-sandbox-layout-links", V = {
4
4
  key: 0,
5
5
  class: "kong-ui-sandbox-navigation"
6
6
  }, A = /* @__PURE__ */ y({
7
7
  __name: "SandboxNavigation",
8
8
  emits: ["router-link-click"],
9
9
  setup(n, { emit: i }) {
10
- const c = i, t = N(S, []);
10
+ const c = i, o = N(S, []);
11
11
  return (h, g) => {
12
- const v = k("router-link");
12
+ const v = m("router-link");
13
13
  return s(), l("nav", null, [
14
- u(t).length ? (s(), l("ul", z, [
15
- (s(!0), l(T, null, $(u(t), (a) => (s(), l("li", {
14
+ u(o).length ? (s(), l("ul", V, [
15
+ (s(!0), l($, null, T(u(o), (a) => (s(), l("li", {
16
16
  key: a.name,
17
17
  class: "sandbox-link"
18
18
  }, [
19
- e(v, {
19
+ t(v, {
20
20
  to: a.to,
21
- onClick: (m) => c("router-link-click", a)
21
+ onClick: (k) => c("router-link-click", a)
22
22
  }, {
23
23
  default: d(() => [
24
- x(f(a.name), 1)
24
+ x(b(a.name), 1)
25
25
  ]),
26
26
  _: 2
27
27
  }, 1032, ["to", "onClick"])
@@ -32,10 +32,10 @@ const S = "kong-ui-sandbox-layout-links", z = {
32
32
  }
33
33
  }), I = (n, i) => {
34
34
  const c = n.__vccOpts || n;
35
- for (const [t, h] of i)
36
- c[t] = h;
35
+ for (const [o, h] of i)
36
+ c[o] = h;
37
37
  return c;
38
- }, b = /* @__PURE__ */ I(A, [["__scopeId", "data-v-b67e5e07"]]), C = "24px", B = { class: "kong-ui-sandbox-layout" }, M = { class: "header" }, U = { class: "header-left" }, W = { class: "mobile-nav-container" }, D = { class: "toggle-mobile-nav" }, R = {
38
+ }, f = /* @__PURE__ */ I(A, [["__scopeId", "data-v-b67e5e07"]]), C = "24px", B = { class: "kong-ui-sandbox-layout" }, M = { class: "header" }, U = { class: "header-left" }, W = { class: "mobile-nav-container" }, D = { class: "toggle-mobile-nav" }, R = {
39
39
  key: 0,
40
40
  class: "mobile-title"
41
41
  }, Y = { class: "header-right" }, j = {
@@ -62,36 +62,36 @@ const S = "kong-ui-sandbox-layout-links", z = {
62
62
  }
63
63
  },
64
64
  setup(n) {
65
- K((t) => ({
66
- v013f10df: c.value
65
+ K((o) => ({
66
+ v92eae8f6: c.value
67
67
  }));
68
68
  const i = n;
69
69
  L(S, i.links);
70
- const c = O(() => `${i.controlsMinWidth}px`);
71
- return (t, h) => {
72
- const g = k("KSlideout"), v = k("KToggle"), a = k("router-link");
70
+ const c = z(() => `${i.controlsMinWidth}px`);
71
+ return (o, h) => {
72
+ const g = m("KSlideout"), v = m("KToggle"), a = m("router-link");
73
73
  return s(), l("div", B, [
74
- o("header", M, [
75
- o("div", U, [
76
- o("div", W, [
77
- e(v, null, {
78
- default: d(({ isToggled: m, toggle: r }) => [
79
- o("div", null, [
80
- o("div", D, [
81
- e(u(E), {
74
+ e("header", M, [
75
+ e("div", U, [
76
+ e("div", W, [
77
+ t(v, null, {
78
+ default: d(({ isToggled: k, toggle: r }) => [
79
+ e("div", null, [
80
+ e("div", D, [
81
+ t(u(O), {
82
82
  role: "button",
83
- size: u(C),
83
+ size: `var(--kui-icon-size-50, ${u(C)})`,
84
84
  title: "Toggle menu",
85
85
  onClick: r
86
86
  }, null, 8, ["size", "onClick"])
87
87
  ]),
88
- e(g, {
88
+ t(g, {
89
89
  title: "Main Menu",
90
- visible: m.value,
90
+ visible: k.value,
91
91
  onClose: r
92
92
  }, {
93
93
  default: d(() => [
94
- e(b, { onRouterLinkClick: r }, null, 8, ["onRouterLinkClick"])
94
+ t(f, { onRouterLinkClick: r }, null, 8, ["onRouterLinkClick"])
95
95
  ]),
96
96
  _: 2
97
97
  }, 1032, ["visible", "onClose"])
@@ -100,38 +100,38 @@ const S = "kong-ui-sandbox-layout-links", z = {
100
100
  _: 1
101
101
  }),
102
102
  n.title ? (s(), l("h1", R, [
103
- e(a, {
103
+ t(a, {
104
104
  class: "home-link",
105
105
  to: { name: "home" }
106
106
  }, {
107
107
  default: d(() => [
108
- x(f(n.title), 1)
108
+ x(b(n.title), 1)
109
109
  ]),
110
110
  _: 1
111
111
  })
112
112
  ])) : _("", !0)
113
113
  ])
114
114
  ]),
115
- o("div", Y, [
116
- t.$slots.controls ? (s(), l("div", j, [
117
- e(v, null, {
118
- default: d(({ isToggled: m, toggle: r }) => [
119
- o("div", null, [
120
- o("div", q, [
121
- e(u(V), {
115
+ e("div", Y, [
116
+ o.$slots.controls ? (s(), l("div", j, [
117
+ t(v, null, {
118
+ default: d(({ isToggled: k, toggle: r }) => [
119
+ e("div", null, [
120
+ e("div", q, [
121
+ t(u(E), {
122
122
  role: "button",
123
- size: u(C),
123
+ size: `var(--kui-icon-size-50, ${u(C)})`,
124
124
  title: "Toggle controls",
125
125
  onClick: r
126
126
  }, null, 8, ["size", "onClick"])
127
127
  ]),
128
- e(g, {
128
+ t(g, {
129
129
  title: "Controls",
130
- visible: m.value,
130
+ visible: k.value,
131
131
  onClose: r
132
132
  }, {
133
133
  default: d(() => [
134
- p(t.$slots, "controls", {}, void 0, !0)
134
+ p(o.$slots, "controls", {}, void 0, !0)
135
135
  ]),
136
136
  _: 3
137
137
  }, 8, ["visible", "onClose"])
@@ -142,22 +142,22 @@ const S = "kong-ui-sandbox-layout-links", z = {
142
142
  ])) : _("", !0)
143
143
  ])
144
144
  ]),
145
- o("div", w, [
146
- o("div", F, [
147
- e(b)
145
+ e("div", w, [
146
+ e("div", F, [
147
+ t(f)
148
148
  ]),
149
- o("div", G, [
150
- n.title ? (s(), l("h1", J, f(n.title), 1)) : _("", !0),
151
- p(t.$slots, "default", {}, void 0, !0)
149
+ e("div", G, [
150
+ n.title ? (s(), l("h1", J, b(n.title), 1)) : _("", !0),
151
+ p(o.$slots, "default", {}, void 0, !0)
152
152
  ]),
153
- t.$slots.controls ? (s(), l("div", X, [
154
- p(t.$slots, "controls", {}, void 0, !0)
153
+ o.$slots.controls ? (s(), l("div", X, [
154
+ p(o.$slots, "controls", {}, void 0, !0)
155
155
  ])) : _("", !0)
156
156
  ])
157
157
  ]);
158
158
  };
159
159
  }
160
- }), Q = /* @__PURE__ */ I(Z, [["__scopeId", "data-v-c0d4de41"]]);
160
+ }), Q = /* @__PURE__ */ I(Z, [["__scopeId", "data-v-27b354aa"]]);
161
161
  export {
162
162
  Q as SandboxLayout
163
163
  };
@@ -1 +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,m){"use strict";const k="kong-ui-sandbox-layout-links",N={key:0,class:"kong-ui-sandbox-navigation"},g=e.defineComponent({__name:"SandboxNavigation",emits:["router-link-click"],setup(o,{emit:l}){const s=l,t=e.inject(k,[]);return(d,_)=>{const r=e.resolveComponent("router-link");return e.openBlock(),e.createElementBlock("nav",null,[e.unref(t).length?(e.openBlock(),e.createElementBlock("ul",N,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(t),c=>(e.openBlock(),e.createElementBlock("li",{key:c.name,class:"sandbox-link"},[e.createVNode(r,{to:c.to,onClick:a=>s("router-link-click",c)},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(c.name),1)]),_:2},1032,["to","onClick"])]))),128))])):e.createCommentVNode("",!0)])}}}),p=(o,l)=>{const s=o.__vccOpts||o;for(const[t,d]of l)s[t]=d;return s},f=p(g,[["__scopeId","data-v-b67e5e07"]]),h="24px",C={class:"kong-ui-sandbox-layout"},V={class:"header"},b={class:"header-left"},y={class:"mobile-nav-container"},x={class:"toggle-mobile-nav"},E={key:0,class:"mobile-title"},B={class:"header-right"},S={key:0,class:"mobile-controls-container"},u={class:"toggle-mobile-controls"},T={class:"layout"},I={class:"desktop-nav-container"},K={class:"sandbox-container"},L={key:0},$={key:0,class:"sandbox-controls"},O=p(e.defineComponent({__name:"SandboxLayout",props:{title:{type:String,default:""},links:{type:Array,required:!1,default:()=>[]},controlsMinWidth:{type:Number,default:240}},setup(o){e.useCssVars(t=>({v013f10df:s.value}));const l=o;e.provide(k,l.links);const s=e.computed(()=>`${l.controlsMinWidth}px`);return(t,d)=>{const _=e.resolveComponent("KSlideout"),r=e.resolveComponent("KToggle"),c=e.resolveComponent("router-link");return e.openBlock(),e.createElementBlock("div",C,[e.createElementVNode("header",V,[e.createElementVNode("div",b,[e.createElementVNode("div",y,[e.createVNode(r,null,{default:e.withCtx(({isToggled:a,toggle:i})=>[e.createElementVNode("div",null,[e.createElementVNode("div",x,[e.createVNode(e.unref(m.MenuIcon),{role:"button",size:e.unref(h),title:"Toggle menu",onClick:i},null,8,["size","onClick"])]),e.createVNode(_,{title:"Main Menu",visible:a.value,onClose:i},{default:e.withCtx(()=>[e.createVNode(f,{onRouterLinkClick:i},null,8,["onRouterLinkClick"])]),_:2},1032,["visible","onClose"])])]),_:1}),o.title?(e.openBlock(),e.createElementBlock("h1",E,[e.createVNode(c,{class:"home-link",to:{name:"home"}},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(o.title),1)]),_:1})])):e.createCommentVNode("",!0)])]),e.createElementVNode("div",B,[t.$slots.controls?(e.openBlock(),e.createElementBlock("div",S,[e.createVNode(r,null,{default:e.withCtx(({isToggled:a,toggle:i})=>[e.createElementVNode("div",null,[e.createElementVNode("div",u,[e.createVNode(e.unref(m.CogIcon),{role:"button",size:e.unref(h),title:"Toggle controls",onClick:i},null,8,["size","onClick"])]),e.createVNode(_,{title:"Controls",visible:a.value,onClose:i},{default:e.withCtx(()=>[e.renderSlot(t.$slots,"controls",{},void 0,!0)]),_:3},8,["visible","onClose"])])]),_:3})])):e.createCommentVNode("",!0)])]),e.createElementVNode("div",T,[e.createElementVNode("div",I,[e.createVNode(f)]),e.createElementVNode("div",K,[o.title?(e.openBlock(),e.createElementBlock("h1",L,e.toDisplayString(o.title),1)):e.createCommentVNode("",!0),e.renderSlot(t.$slots,"default",{},void 0,!0)]),t.$slots.controls?(e.openBlock(),e.createElementBlock("div",$,[e.renderSlot(t.$slots,"controls",{},void 0,!0)])):e.createCommentVNode("",!0)])])}}}),[["__scopeId","data-v-c0d4de41"]]);n.SandboxLayout=O,Object.defineProperty(n,Symbol.toStringTag,{value:"Module"})});
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,m){"use strict";const k="kong-ui-sandbox-layout-links",N={key:0,class:"kong-ui-sandbox-navigation"},g=e.defineComponent({__name:"SandboxNavigation",emits:["router-link-click"],setup(o,{emit:l}){const s=l,t=e.inject(k,[]);return(d,_)=>{const r=e.resolveComponent("router-link");return e.openBlock(),e.createElementBlock("nav",null,[e.unref(t).length?(e.openBlock(),e.createElementBlock("ul",N,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(t),c=>(e.openBlock(),e.createElementBlock("li",{key:c.name,class:"sandbox-link"},[e.createVNode(r,{to:c.to,onClick:a=>s("router-link-click",c)},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(c.name),1)]),_:2},1032,["to","onClick"])]))),128))])):e.createCommentVNode("",!0)])}}}),p=(o,l)=>{const s=o.__vccOpts||o;for(const[t,d]of l)s[t]=d;return s},h=p(g,[["__scopeId","data-v-b67e5e07"]]),f="24px",C={class:"kong-ui-sandbox-layout"},V={class:"header"},b={class:"header-left"},y={class:"mobile-nav-container"},x={class:"toggle-mobile-nav"},E={key:0,class:"mobile-title"},B={class:"header-right"},S={key:0,class:"mobile-controls-container"},u={class:"toggle-mobile-controls"},T={class:"layout"},I={class:"desktop-nav-container"},$={class:"sandbox-container"},K={key:0},L={key:0,class:"sandbox-controls"},O=p(e.defineComponent({__name:"SandboxLayout",props:{title:{type:String,default:""},links:{type:Array,required:!1,default:()=>[]},controlsMinWidth:{type:Number,default:240}},setup(o){e.useCssVars(t=>({v92eae8f6:s.value}));const l=o;e.provide(k,l.links);const s=e.computed(()=>`${l.controlsMinWidth}px`);return(t,d)=>{const _=e.resolveComponent("KSlideout"),r=e.resolveComponent("KToggle"),c=e.resolveComponent("router-link");return e.openBlock(),e.createElementBlock("div",C,[e.createElementVNode("header",V,[e.createElementVNode("div",b,[e.createElementVNode("div",y,[e.createVNode(r,null,{default:e.withCtx(({isToggled:a,toggle:i})=>[e.createElementVNode("div",null,[e.createElementVNode("div",x,[e.createVNode(e.unref(m.MenuIcon),{role:"button",size:`var(--kui-icon-size-50, ${e.unref(f)})`,title:"Toggle menu",onClick:i},null,8,["size","onClick"])]),e.createVNode(_,{title:"Main Menu",visible:a.value,onClose:i},{default:e.withCtx(()=>[e.createVNode(h,{onRouterLinkClick:i},null,8,["onRouterLinkClick"])]),_:2},1032,["visible","onClose"])])]),_:1}),o.title?(e.openBlock(),e.createElementBlock("h1",E,[e.createVNode(c,{class:"home-link",to:{name:"home"}},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(o.title),1)]),_:1})])):e.createCommentVNode("",!0)])]),e.createElementVNode("div",B,[t.$slots.controls?(e.openBlock(),e.createElementBlock("div",S,[e.createVNode(r,null,{default:e.withCtx(({isToggled:a,toggle:i})=>[e.createElementVNode("div",null,[e.createElementVNode("div",u,[e.createVNode(e.unref(m.CogIcon),{role:"button",size:`var(--kui-icon-size-50, ${e.unref(f)})`,title:"Toggle controls",onClick:i},null,8,["size","onClick"])]),e.createVNode(_,{title:"Controls",visible:a.value,onClose:i},{default:e.withCtx(()=>[e.renderSlot(t.$slots,"controls",{},void 0,!0)]),_:3},8,["visible","onClose"])])]),_:3})])):e.createCommentVNode("",!0)])]),e.createElementVNode("div",T,[e.createElementVNode("div",I,[e.createVNode(h)]),e.createElementVNode("div",$,[o.title?(e.openBlock(),e.createElementBlock("h1",K,e.toDisplayString(o.title),1)):e.createCommentVNode("",!0),e.renderSlot(t.$slots,"default",{},void 0,!0)]),t.$slots.controls?(e.openBlock(),e.createElementBlock("div",L,[e.renderSlot(t.$slots,"controls",{},void 0,!0)])):e.createCommentVNode("",!0)])])}}}),[["__scopeId","data-v-27b354aa"]]);n.SandboxLayout=O,Object.defineProperty(n,Symbol.toStringTag,{value:"Module"})});
package/dist/style.css CHANGED
@@ -1 +1 @@
1
- .kong-ui-sandbox-navigation[data-v-b67e5e07]{list-style:none;margin:0;margin:var(--kui-space-0, 0px);padding:0;padding:var(--kui-space-0, 0px)}.kong-ui-sandbox-navigation .sandbox-link[data-v-b67e5e07]{margin-bottom:8px;margin-bottom:var(--kui-space-40, 8px)}.kong-ui-sandbox-navigation .sandbox-link[data-v-b67e5e07]:last-of-type{margin-bottom:0}.kong-ui-sandbox-navigation .sandbox-link a[data-v-b67e5e07]{background:#eee;border-radius:4px;border-radius:var(--kui-border-radius-20, 4px);color:#0044f4;color:var(--kui-color-text-primary, #0044f4);display:block;font-weight:600;font-weight:var(--kui-font-weight-semibold, 600);overflow:hidden;padding:8px 16px;padding:var(--kui-space-40, 8px) var(--kui-space-60, 16px);text-decoration:none;text-overflow:ellipsis;transition:all .2s ease-in-out;transition:all var(--kui-animation-duration-20, .2s) ease-in-out;white-space:nowrap}.kong-ui-sandbox-navigation .sandbox-link a[data-v-b67e5e07]:hover{background:#ccc;color:#002099;color:var(--kui-color-text-primary-stronger, #002099)}.kong-ui-sandbox-navigation .sandbox-link a.router-link-exact-active[data-v-b67e5e07],.kong-ui-sandbox-navigation .sandbox-link a.active[data-v-b67e5e07],.kong-ui-sandbox-navigation .sandbox-link a.router-link-exact-active[data-v-b67e5e07]:hover,.kong-ui-sandbox-navigation .sandbox-link a.active[data-v-b67e5e07]:hover{background:#0044f4;background:var(--kui-color-background-primary, #0044f4);color:#fff;color:var(--kui-color-text-inverse, #ffffff)}html,body{margin:0;padding:0}.kong-ui-sandbox-layout .header[data-v-c0d4de41]{align-items:center;border-bottom:1px solid #e0e4ea;border-bottom:var(--kui-border-width-10, 1px) solid var(--kui-color-border, #e0e4ea);display:flex;justify-content:space-between;width:100%}@media (min-width: 1280px){.kong-ui-sandbox-layout .header[data-v-c0d4de41]{display:none}}.kong-ui-sandbox-layout .header .header-left[data-v-c0d4de41],.kong-ui-sandbox-layout .header .header-right[data-v-c0d4de41]{align-items:center;display:flex;gap:20px;gap:var(--kui-space-70, 20px);padding:20px;padding:var(--kui-space-70, 20px);width:100%}.kong-ui-sandbox-layout .header .header-right[data-v-c0d4de41]{justify-content:flex-end}.kong-ui-sandbox-layout .header h1[data-v-c0d4de41]{font-size:18px;font-size:var(--kui-font-size-50, 18px);margin:0;margin:var(--kui-space-0, 0px);white-space:nowrap}@media (min-width: 768px){.kong-ui-sandbox-layout .header h1[data-v-c0d4de41]{font-size:24px;font-size:var(--kui-font-size-70, 24px)}}.kong-ui-sandbox-layout .layout[data-v-c0d4de41]{display:flex;gap:20px;gap:var(--kui-space-70, 20px);padding:20px;padding:var(--kui-space-70, 20px)}.kong-ui-sandbox-layout .mobile-nav-container[data-v-c0d4de41]{align-items:center;display:flex;gap:20px;gap:var(--kui-space-70, 20px)}@media (min-width: 1280px){.kong-ui-sandbox-layout .mobile-nav-container[data-v-c0d4de41],.kong-ui-sandbox-layout .mobile-controls-container[data-v-c0d4de41],.kong-ui-sandbox-layout .mobile-title[data-v-c0d4de41]{display:none}}.kong-ui-sandbox-layout .sandbox-controls[data-v-c0d4de41],.kong-ui-sandbox-layout .desktop-nav-container[data-v-c0d4de41]{display:none}@media (min-width: 1280px){.kong-ui-sandbox-layout .sandbox-controls[data-v-c0d4de41],.kong-ui-sandbox-layout .desktop-nav-container[data-v-c0d4de41]{display:block}}.kong-ui-sandbox-layout .desktop-nav-container[data-v-c0d4de41]{min-width:240px}.kong-ui-sandbox-layout .sandbox-container[data-v-c0d4de41]{min-height:50vh;width:100%}@media (min-width: 1280px){.kong-ui-sandbox-layout .sandbox-container[data-v-c0d4de41]{border:1px solid #e0e4ea;border:var(--kui-border-width-10, 1px) solid var(--kui-color-border, #e0e4ea);border-radius:6px;border-radius:var(--kui-border-radius-30, 6px);padding:20px;padding:var(--kui-space-70, 20px)}}.kong-ui-sandbox-layout .sandbox-container h1[data-v-c0d4de41]{margin:0 0 20px;margin:var(--kui-space-0, 0px) var(--kui-space-0, 0px) var(--kui-space-70, 20px)}.kong-ui-sandbox-layout .sandbox-controls[data-v-c0d4de41]{min-width:var(--v013f10df)}@media (min-width: 1280px){.kong-ui-sandbox-layout .sandbox-controls[data-v-c0d4de41]{border:1px solid #e0e4ea;border:var(--kui-border-width-10, 1px) solid var(--kui-color-border, #e0e4ea);border-radius:6px;border-radius:var(--kui-border-radius-30, 6px);padding:20px;padding:var(--kui-space-70, 20px)}}.kong-ui-sandbox-layout .home-link[data-v-c0d4de41],.kong-ui-sandbox-layout .home-link[data-v-c0d4de41]:visited{color:#0044f4;color:var(--kui-color-text-primary, #0044f4);text-decoration:none}.kong-ui-sandbox-layout .toggle-mobile-nav[data-v-c0d4de41],.kong-ui-sandbox-layout .toggle-mobile-controls[data-v-c0d4de41]{color:#0044f4;color:var(--kui-color-text-primary, #0044f4);cursor:pointer;transition:color .2s ease-in-out;transition:color var(--kui-animation-duration-20, .2s) ease-in-out}.kong-ui-sandbox-layout .toggle-mobile-nav[data-v-c0d4de41]:hover,.kong-ui-sandbox-layout .toggle-mobile-controls[data-v-c0d4de41]:hover{color:#0030cc;color:var(--kui-color-text-primary-strong, #0030cc)}.kong-ui-sandbox-layout[data-v-c0d4de41] .k-slideout,.kong-ui-sandbox-layout[data-v-c0d4de41] .k-card-body{font-size:16px;font-size:var(--kui-font-size-40, 16px)}
1
+ .kong-ui-sandbox-navigation[data-v-b67e5e07]{list-style:none;margin:0;margin:var(--kui-space-0, 0px);padding:0;padding:var(--kui-space-0, 0px)}.kong-ui-sandbox-navigation .sandbox-link[data-v-b67e5e07]{margin-bottom:8px;margin-bottom:var(--kui-space-40, 8px)}.kong-ui-sandbox-navigation .sandbox-link[data-v-b67e5e07]:last-of-type{margin-bottom:0}.kong-ui-sandbox-navigation .sandbox-link a[data-v-b67e5e07]{background:#eee;border-radius:4px;border-radius:var(--kui-border-radius-20, 4px);color:#0044f4;color:var(--kui-color-text-primary, #0044f4);display:block;font-weight:600;font-weight:var(--kui-font-weight-semibold, 600);overflow:hidden;padding:8px 16px;padding:var(--kui-space-40, 8px) var(--kui-space-60, 16px);text-decoration:none;text-overflow:ellipsis;transition:all .2s ease-in-out;transition:all var(--kui-animation-duration-20, .2s) ease-in-out;white-space:nowrap}.kong-ui-sandbox-navigation .sandbox-link a[data-v-b67e5e07]:hover{background:#ccc;color:#002099;color:var(--kui-color-text-primary-stronger, #002099)}.kong-ui-sandbox-navigation .sandbox-link a.router-link-exact-active[data-v-b67e5e07],.kong-ui-sandbox-navigation .sandbox-link a.active[data-v-b67e5e07],.kong-ui-sandbox-navigation .sandbox-link a.router-link-exact-active[data-v-b67e5e07]:hover,.kong-ui-sandbox-navigation .sandbox-link a.active[data-v-b67e5e07]:hover{background:#0044f4;background:var(--kui-color-background-primary, #0044f4);color:#fff;color:var(--kui-color-text-inverse, #ffffff)}html,body{margin:0;padding:0}.kong-ui-sandbox-layout .header[data-v-27b354aa]{align-items:center;border-bottom:1px solid #e0e4ea;border-bottom:var(--kui-border-width-10, 1px) solid var(--kui-color-border, #e0e4ea);display:flex;justify-content:space-between;width:100%}@media (min-width: 1280px){.kong-ui-sandbox-layout .header[data-v-27b354aa]{display:none}}.kong-ui-sandbox-layout .header .header-left[data-v-27b354aa],.kong-ui-sandbox-layout .header .header-right[data-v-27b354aa]{align-items:center;display:flex;gap:20px;gap:var(--kui-space-70, 20px);padding:20px;padding:var(--kui-space-70, 20px);width:100%}.kong-ui-sandbox-layout .header .header-right[data-v-27b354aa]{justify-content:flex-end}.kong-ui-sandbox-layout .header h1[data-v-27b354aa]{font-size:18px;font-size:var(--kui-font-size-50, 18px);margin:0;margin:var(--kui-space-0, 0px);white-space:nowrap}@media (min-width: 768px){.kong-ui-sandbox-layout .header h1[data-v-27b354aa]{font-size:24px;font-size:var(--kui-font-size-70, 24px)}}.kong-ui-sandbox-layout .layout[data-v-27b354aa]{display:flex;gap:20px;gap:var(--kui-space-70, 20px);padding:20px;padding:var(--kui-space-70, 20px)}.kong-ui-sandbox-layout .mobile-nav-container[data-v-27b354aa]{align-items:center;display:flex;gap:20px;gap:var(--kui-space-70, 20px)}@media (min-width: 1280px){.kong-ui-sandbox-layout .mobile-nav-container[data-v-27b354aa],.kong-ui-sandbox-layout .mobile-controls-container[data-v-27b354aa],.kong-ui-sandbox-layout .mobile-title[data-v-27b354aa]{display:none}}.kong-ui-sandbox-layout .sandbox-controls[data-v-27b354aa],.kong-ui-sandbox-layout .desktop-nav-container[data-v-27b354aa]{display:none}@media (min-width: 1280px){.kong-ui-sandbox-layout .sandbox-controls[data-v-27b354aa],.kong-ui-sandbox-layout .desktop-nav-container[data-v-27b354aa]{display:block}}.kong-ui-sandbox-layout .desktop-nav-container[data-v-27b354aa]{min-width:240px}.kong-ui-sandbox-layout .sandbox-container[data-v-27b354aa]{min-height:50vh;width:100%}@media (min-width: 1280px){.kong-ui-sandbox-layout .sandbox-container[data-v-27b354aa]{border:1px solid #e0e4ea;border:var(--kui-border-width-10, 1px) solid var(--kui-color-border, #e0e4ea);border-radius:6px;border-radius:var(--kui-border-radius-30, 6px);padding:20px;padding:var(--kui-space-70, 20px)}}.kong-ui-sandbox-layout .sandbox-container h1[data-v-27b354aa]{margin:0 0 20px;margin:var(--kui-space-0, 0px) var(--kui-space-0, 0px) var(--kui-space-70, 20px)}.kong-ui-sandbox-layout .sandbox-controls[data-v-27b354aa]{min-width:var(--v92eae8f6)}@media (min-width: 1280px){.kong-ui-sandbox-layout .sandbox-controls[data-v-27b354aa]{border:1px solid #e0e4ea;border:var(--kui-border-width-10, 1px) solid var(--kui-color-border, #e0e4ea);border-radius:6px;border-radius:var(--kui-border-radius-30, 6px);padding:20px;padding:var(--kui-space-70, 20px)}}.kong-ui-sandbox-layout .home-link[data-v-27b354aa],.kong-ui-sandbox-layout .home-link[data-v-27b354aa]:visited{color:#0044f4;color:var(--kui-color-text-primary, #0044f4);text-decoration:none}.kong-ui-sandbox-layout .toggle-mobile-nav[data-v-27b354aa],.kong-ui-sandbox-layout .toggle-mobile-controls[data-v-27b354aa]{color:#0044f4;color:var(--kui-color-text-primary, #0044f4);cursor:pointer;transition:color .2s ease-in-out;transition:color var(--kui-animation-duration-20, .2s) ease-in-out}.kong-ui-sandbox-layout .toggle-mobile-nav[data-v-27b354aa]:hover,.kong-ui-sandbox-layout .toggle-mobile-controls[data-v-27b354aa]:hover{color:#0030cc;color:var(--kui-color-text-primary-strong, #0030cc)}.kong-ui-sandbox-layout[data-v-27b354aa] .k-slideout,.kong-ui-sandbox-layout[data-v-27b354aa] .k-card-body{font-size:16px;font-size:var(--kui-font-size-40, 16px)}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@kong-ui-public/sandbox-layout",
3
- "version": "2.4.22",
3
+ "version": "2.4.23-pr.3477.a6d47be95.0",
4
4
  "type": "module",
5
5
  "main": "./dist/sandbox-layout.umd.js",
6
6
  "module": "./dist/sandbox-layout.es.js",
@@ -21,7 +21,7 @@
21
21
  "access": "public"
22
22
  },
23
23
  "devDependencies": {
24
- "@kong/design-tokens": "1.23.0",
24
+ "@kong/design-tokens": "2.0.0",
25
25
  "@kong/kongponents": "9.60.0",
26
26
  "vue": "^3.5.35",
27
27
  "vue-router": "^5.1.0"