@warp-ds/elements 2.3.0-next.7 → 2.3.0-next.8

package/dist/packages/rip-and-tear-checkbox/checkbox.stories.d.ts

@@ -6,3 +6,6 @@ declare const _default: {
 };
 export default _default;
 export declare const Default: StoryObj;
+export declare const Invalid: StoryObj;
+export declare const Disabled: StoryObj;
+export declare const BunchOfCheckboxes: StoryObj;

package/dist/packages/rip-and-tear-checkbox/checkbox.stories.js

@@ -9,3 +9,17 @@ export default {
     },
 };
 export const Default = {};
+export const Invalid = {
+    render: () => html `<w-checkbox name="invalidfoo" value="bar" invalid>Invalid checkbox</w-checkbox>`,
+};
+export const Disabled = {
+    render: () => html `<w-checkbox name="disabledfoo" value="bar" disabled>Disabled checkbox</w-checkbox>`,
+};
+export const BunchOfCheckboxes = {
+    render: () => html `
+    <w-checkbox-group>
+      <w-checkbox name="group" value="foo">Foo</w-checkbox>
+      <w-checkbox name="group" value="bar">Bar</w-checkbox>
+    </w-checkbox-group>
+  `,
+};

package/dist/packages/rip-and-tear-checkbox/index.js

@@ -1,4 +1,6 @@
 import { WCheckbox } from './checkbox';
+import { WCheckboxGroup } from './checkbox-group';
 if (!customElements.get('w-checkbox')) {
     customElements.define('w-checkbox', WCheckbox);
+    customElements.define('w-checkbox-group', WCheckboxGroup);
 }

package/dist/packages/rip-and-tear-checkbox/react.d.ts

@@ -1,5 +1,7 @@
 import { WCheckbox } from './checkbox.js';
+import { WCheckboxGroup } from './checkbox-group.js';
 export declare const Checkbox: import("@lit/react").ReactWebComponent<WCheckbox, {
     onChange: string;
     onchange: string;
 }>;
+export declare const CheckboxGroup: import("@lit/react").ReactWebComponent<WCheckboxGroup, {}>;

package/dist/packages/rip-and-tear-checkbox/react.js

@@ -13,3 +13,8 @@ export const Checkbox = createComponent({
         onchange: 'change',
     },
 });
+export const CheckboxGroup = createComponent({
+    tagName: 'w-checkbox-group',
+    elementClass: Component,
+    react: React,
+});

package/dist/packages/rip-and-tear-radio/radio-group.js

@@ -20,7 +20,6 @@ var X=Object.defineProperty;var P=Object.getOwnPropertyDescriptor;var V=i=>{thro
     display: grid;
     grid-template-columns: 2rem max-content;
     gap: 8px;
-    padding: 0.2rem 0;
   }
   .hide-toggle {
     position: absolute;
@@ -43,7 +42,7 @@ var X=Object.defineProperty;var P=Object.getOwnPropertyDescriptor;var V=i=>{thro
     height: 2rem;
     width: 2rem;
     background-color: var(--w-s-color-background);
-    border-color: var(--w-s-color-border);
+    border-color: var(--w-s-color-border-strong);
     color: var(--w-s-color-icon-inverted);
     font-weight: 700;
     text-align: center;
@@ -54,7 +53,7 @@ var X=Object.defineProperty;var P=Object.getOwnPropertyDescriptor;var V=i=>{thro
     position: relative;
   }
   :host([type='checkbox']) .control {
-    border-radius: 2px;
+    border-radius: 4px;
   }
   .checkbox:has(:checked, :indeterminate),
   :host([type='checkbox'][checked]) .control,