kempo-ui 0.0.68 → 0.0.70

package/dist/components/Toggle.js

@@ -29,6 +29,8 @@ import{html,css}from"../lit-all.min.js";import ShadowComponent from"./ShadowComp
     #switch {
       display: flex;
       align-items: center;
+      flex-shrink: 0;
+      flex-grow: 0;
       width: var(--switch_width);
       height: var(--switch_height);
       border: var(--switch_border);

package/docs/components/toggle.html

@@ -23,6 +23,7 @@
         <h6>Examples</h6>
         <a href="#basicUsage">Basic Usage</a><br />
         <a href="#onByDefault">On By Default</a><br />
+        <a href="#responsiveBehavior">Responsive Behavior</a><br />
         <a href="#customStyles">Custom Styles</a><br />
         <a href="#javascriptUsage">JavaScript Usage</a><br />
         
@@ -63,6 +64,23 @@
       </div>
     </div>
 
+    <h3 id="responsiveBehavior"><a href="#responsiveBehavior" class="no-link">Responsive Behavior</a></h3>
+    <p>The visual toggle maintains its size even in narrow containers. Only the label shrinks to fit the available space.</p>
+    <div class="row -mx">
+      <div class="col m-span-12 px">
+        <k-card label="HTML">
+          <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"width: 150px;"</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">k-toggle</span>&gt;</span>A very long label that should shrink<span class="hljs-tag">&lt;/<span class="hljs-name">k-toggle</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></code></pre>
+        </k-card>
+      </div>
+      <div class="col m-span-12 px">
+        <k-card label="Output">
+          <div style="width: 150px;">
+            <k-toggle>A very long label that should shrink</k-toggle>
+          </div>
+        </k-card>
+      </div>
+    </div>
+
     <h3 id="customStyles"><a href="#customStyles" class="no-link">Custom Styles</a></h3>
     <div class="row -mx">
       <div class="col m-span-12 px">

package/docs/src/components/Toggle.js

@@ -29,6 +29,8 @@ import{html,css}from"../lit-all.min.js";import ShadowComponent from"./ShadowComp
     #switch {
       display: flex;
       align-items: center;
+      flex-shrink: 0;
+      flex-grow: 0;
       width: var(--switch_width);
       height: var(--switch_height);
       border: var(--switch_border);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kempo-ui",
-  "version": "0.0.68",
+  "version": "0.0.70",
   "type": "module",
   "description": "A Lit based web-component library",
   "main": "index.js",

package/src/components/Toggle.js

@@ -123,6 +123,8 @@ export default class Toggle extends ShadowComponent {
     #switch {
       display: flex;
       align-items: center;
+      flex-shrink: 0;
+      flex-grow: 0;
       width: var(--switch_width);
       height: var(--switch_height);
       border: var(--switch_border);

package/tests/components/Toggle.browser-test.js

@@ -512,6 +512,37 @@ export default {
 		pass('Label content projected');
 	},
 
+	'switch should not shrink in constrained container': async ({pass, fail}) => {
+		const { container, toggle } = await createToggle();
+		container.style.width = '100px';
+		await toggle.updateComplete;
+		const switchEl = toggle.shadowRoot.querySelector('#switch');
+		const style = window.getComputedStyle(switchEl);
+		if(style.flexShrink !== '0'){
+			cleanup(container);
+			return fail(`Expected switch flex-shrink to be 0, got ${style.flexShrink}`);
+		}
+		if(style.flexGrow !== '0'){
+			cleanup(container);
+			return fail(`Expected switch flex-grow to be 0, got ${style.flexGrow}`);
+		}
+		cleanup(container);
+		pass('Switch does not shrink in constrained container');
+	},
+
+	'label should shrink in constrained container': async ({pass, fail}) => {
+		const { container, toggle } = await createToggle();
+		await toggle.updateComplete;
+		const label = toggle.shadowRoot.querySelector('#label');
+		const style = window.getComputedStyle(label);
+		if(style.flexGrow !== '1'){
+			cleanup(container);
+			return fail(`Expected label flex-grow to be 1, got ${style.flexGrow}`);
+		}
+		cleanup(container);
+		pass('Label grows to fill remaining space');
+	},
+
 	/*
 		Method Chaining
 	*/