@operato/input 2.0.0-alpha.145 → 2.0.0-alpha.148

package/dist/stories/ox-input-options.stories.js

@@ -1,16 +1,22 @@
 import '../src/ox-input-options.js';
 import { html } from 'lit';
+import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles';
 export default {
     title: 'ox-input-options',
     component: 'ox-input-options',
     argTypes: {
         value: { control: 'object' },
         name: { control: 'text' },
-        disabled: { control: 'boolean' }
+        disabled: { control: 'boolean' },
+        theme: { control: 'select', options: ['light', 'dark'] }
     }
 };
-const Template = ({ name = 'options', value = {}, disabled }) => html `
-  <link href="/themes/app-theme.css" rel="stylesheet" />
+const Template = ({ name = 'options', value = {}, disabled, theme = 'light' }) => html `
+  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet" />
+
+  <link href="/themes/light.css" rel="stylesheet" />
+  <link href="/themes/dark.css" rel="stylesheet" />
+  <link href="/themes/spacing.css" rel="stylesheet" />
 
   <link
     href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
@@ -24,20 +30,37 @@ const Template = ({ name = 'options', value = {}, disabled }) => html `
     href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1"
     rel="stylesheet"
   />
+
   <style>
-    body {
+    ${MDTypeScaleStyles.cssText}
+  </style>
+
+  <style>
+    .container {
+      height: 500px;
+      text-align: center;
+      padding: 20px;
+
+      background-color: var(--md-sys-color-primary-container);
+      color: var(--md-sys-color-on-primary-container);
     }
   </style>
 
-  <ox-input-options
-    @change=${(e) => {
+  <script>
+    document.body.classList.add('${theme}')
+  </script>
+
+  <div class="container md-typescale-body-large-prominent">
+    <ox-input-options
+      @change=${(e) => {
     console.log(e.target.value);
 }}
-    name=${name}
-    .value=${value}
-    ?disabled=${disabled}
-  >
-  </ox-input-options>
+      name=${name}
+      .value=${value}
+      ?disabled=${disabled}
+    >
+    </ox-input-options>
+  </div>
 `;
 export const Regular = Template.bind({});
 Regular.args = {

package/dist/stories/ox-input-options.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"ox-input-options.stories.js","sourceRoot":"","sources":["../../stories/ox-input-options.stories.ts"],"names":[],"mappings":"AAAA,OAAO,4BAA4B,CAAA;AAEnC,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAE1C,eAAe;IACb,KAAK,EAAE,kBAAkB;IACzB,SAAS,EAAE,kBAAkB;IAC7B,QAAQ,EAAE;QACR,KAAK,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;QAC5B,IAAI,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QACzB,QAAQ,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;KACjC;CACF,CAAA;AAcD,MAAM,QAAQ,GAAoB,CAAC,EAAE,IAAI,GAAG,SAAS,EAAE,KAAK,GAAG,EAAE,EAAE,QAAQ,EAAY,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;cAqBlF,CAAC,CAAQ,EAAE,EAAE;IACrB,OAAO,CAAC,GAAG,CAAE,CAAC,CAAC,MAA2B,CAAC,KAAK,CAAC,CAAA;AACnD,CAAC;WACM,IAAI;aACF,KAAK;gBACF,QAAQ;;;CAGvB,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACxC,OAAO,CAAC,IAAI,GAAG;IACb,IAAI,EAAE,SAAS;IACf,KAAK,EAAE,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE,CAAC;CAC7C,CAAA","sourcesContent":["import '../src/ox-input-options.js'\n\nimport { html, TemplateResult } from 'lit'\n\nexport default {\n  title: 'ox-input-options',\n  component: 'ox-input-options',\n  argTypes: {\n    value: { control: 'object' },\n    name: { control: 'text' },\n    disabled: { control: 'boolean' }\n  }\n}\n\ninterface Story<T> {\n  (args: T): TemplateResult\n  args?: Partial<T>\n  argTypes?: Record<string, unknown>\n}\n\ninterface ArgTypes {\n  name?: string\n  value?: object\n  disabled?: boolean\n}\n\nconst Template: Story<ArgTypes> = ({ name = 'options', value = {}, disabled }: ArgTypes) => html`\n  <link href=\"/themes/app-theme.css\" rel=\"stylesheet\" />\n\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n  <style>\n    body {\n    }\n  </style>\n\n  <ox-input-options\n    @change=${(e: Event) => {\n      console.log((e.target as HTMLInputElement).value)\n    }}\n    name=${name}\n    .value=${value}\n    ?disabled=${disabled}\n  >\n  </ox-input-options>\n`\n\nexport const Regular = Template.bind({})\nRegular.args = {\n  name: 'options',\n  value: [{ text: 'SHOOSE', value: 'Shoose' }]\n}\n"]}
+{"version":3,"file":"ox-input-options.stories.js","sourceRoot":"","sources":["../../stories/ox-input-options.stories.ts"],"names":[],"mappings":"AAAA,OAAO,4BAA4B,CAAA;AAEnC,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAC1C,OAAO,EAAE,MAAM,IAAI,iBAAiB,EAAE,MAAM,8CAA8C,CAAA;AAE1F,eAAe;IACb,KAAK,EAAE,kBAAkB;IACzB,SAAS,EAAE,kBAAkB;IAC7B,QAAQ,EAAE;QACR,KAAK,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;QAC5B,IAAI,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QACzB,QAAQ,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;QAChC,KAAK,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,OAAO,EAAE,MAAM,CAAC,EAAE;KACzD;CACF,CAAA;AAeD,MAAM,QAAQ,GAAoB,CAAC,EAAE,IAAI,GAAG,SAAS,EAAE,KAAK,GAAG,EAAE,EAAE,QAAQ,EAAE,KAAK,GAAG,OAAO,EAAY,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;MAqB3G,iBAAiB,CAAC,OAAO;;;;;;;;;;;;;;;mCAeI,KAAK;;;;;gBAKxB,CAAC,CAAQ,EAAE,EAAE;IACrB,OAAO,CAAC,GAAG,CAAE,CAAC,CAAC,MAA2B,CAAC,KAAK,CAAC,CAAA;AACnD,CAAC;aACM,IAAI;eACF,KAAK;kBACF,QAAQ;;;;CAIzB,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACxC,OAAO,CAAC,IAAI,GAAG;IACb,IAAI,EAAE,SAAS;IACf,KAAK,EAAE,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE,CAAC;CAC7C,CAAA","sourcesContent":["import '../src/ox-input-options.js'\n\nimport { html, TemplateResult } from 'lit'\nimport { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles'\n\nexport default {\n  title: 'ox-input-options',\n  component: 'ox-input-options',\n  argTypes: {\n    value: { control: 'object' },\n    name: { control: 'text' },\n    disabled: { control: 'boolean' },\n    theme: { control: 'select', options: ['light', 'dark'] }\n  }\n}\n\ninterface Story<T> {\n  (args: T): TemplateResult\n  args?: Partial<T>\n  argTypes?: Record<string, unknown>\n}\n\ninterface ArgTypes {\n  name?: string\n  value?: object\n  disabled?: boolean\n  theme?: string\n}\n\nconst Template: Story<ArgTypes> = ({ name = 'options', value = {}, disabled, theme = 'light' }: ArgTypes) => html`\n  <link href=\"https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap\" rel=\"stylesheet\" />\n\n  <link href=\"/themes/light.css\" rel=\"stylesheet\" />\n  <link href=\"/themes/dark.css\" rel=\"stylesheet\" />\n  <link href=\"/themes/spacing.css\" rel=\"stylesheet\" />\n\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n\n  <style>\n    ${MDTypeScaleStyles.cssText}\n  </style>\n\n  <style>\n    .container {\n      height: 500px;\n      text-align: center;\n      padding: 20px;\n\n      background-color: var(--md-sys-color-primary-container);\n      color: var(--md-sys-color-on-primary-container);\n    }\n  </style>\n\n  <script>\n    document.body.classList.add('${theme}')\n  </script>\n\n  <div class=\"container md-typescale-body-large-prominent\">\n    <ox-input-options\n      @change=${(e: Event) => {\n        console.log((e.target as HTMLInputElement).value)\n      }}\n      name=${name}\n      .value=${value}\n      ?disabled=${disabled}\n    >\n    </ox-input-options>\n  </div>\n`\n\nexport const Regular = Template.bind({})\nRegular.args = {\n  name: 'options',\n  value: [{ text: 'SHOOSE', value: 'Shoose' }]\n}\n"]}

package/dist/stories/ox-input-partition-keys.stories.d.ts

@@ -13,6 +13,10 @@ declare const _default: {
         disabled: {
             control: string;
         };
+        theme: {
+            control: string;
+            options: string[];
+        };
     };
 };
 export default _default;
@@ -25,5 +29,6 @@ interface ArgTypes {
     name?: string;
     value?: object;
     disabled?: boolean;
+    theme?: string;
 }
 export declare const Regular: Story<ArgTypes>;

package/dist/stories/ox-input-partition-keys.stories.js

@@ -1,16 +1,22 @@
 import '../src/ox-input-partition-keys.js';
 import { html } from 'lit';
+import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles';
 export default {
     title: 'ox-input-partition-keys',
     component: 'ox-input-partition-keys',
     argTypes: {
         value: { control: 'object' },
         name: { control: 'text' },
-        disabled: { control: 'boolean' }
+        disabled: { control: 'boolean' },
+        theme: { control: 'select', options: ['light', 'dark'] }
     }
 };
-const Template = ({ name = 'partition-keys', value = {}, disabled }) => html `
-  <link href="/themes/app-theme.css" rel="stylesheet" />
+const Template = ({ name = 'partition-keys', value = {}, disabled, theme = 'light' }) => html `
+  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet" />
+
+  <link href="/themes/light.css" rel="stylesheet" />
+  <link href="/themes/dark.css" rel="stylesheet" />
+  <link href="/themes/spacing.css" rel="stylesheet" />
 
   <link
     href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
@@ -24,20 +30,37 @@ const Template = ({ name = 'partition-keys', value = {}, disabled }) => html `
     href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1"
     rel="stylesheet"
   />
+
   <style>
-    body {
+    ${MDTypeScaleStyles.cssText}
+  </style>
+
+  <style>
+    .container {
+      height: 500px;
+      text-align: center;
+      padding: 20px;
+
+      background-color: var(--md-sys-color-primary-container);
+      color: var(--md-sys-color-on-primary-container);
     }
   </style>
 
-  <ox-input-partition-keys
-    @change=${(e) => {
+  <script>
+    document.body.classList.add('${theme}')
+  </script>
+
+  <div class="container md-typescale-body-large-prominent">
+    <ox-input-partition-keys
+      @change=${(e) => {
     console.log(e.target.value);
 }}
-    name=${name}
-    .value=${value}
-    ?disabled=${disabled}
-  >
-  </ox-input-partition-keys>
+      name=${name}
+      .value=${value}
+      ?disabled=${disabled}
+    >
+    </ox-input-partition-keys>
+  </div>
 `;
 export const Regular = Template.bind({});
 Regular.args = {

package/dist/stories/ox-input-partition-keys.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"ox-input-partition-keys.stories.js","sourceRoot":"","sources":["../../stories/ox-input-partition-keys.stories.ts"],"names":[],"mappings":"AAAA,OAAO,mCAAmC,CAAA;AAE1C,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAE1C,eAAe;IACb,KAAK,EAAE,yBAAyB;IAChC,SAAS,EAAE,yBAAyB;IACpC,QAAQ,EAAE;QACR,KAAK,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;QAC5B,IAAI,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QACzB,QAAQ,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;KACjC;CACF,CAAA;AAcD,MAAM,QAAQ,GAAoB,CAAC,EAAE,IAAI,GAAG,gBAAgB,EAAE,KAAK,GAAG,EAAE,EAAE,QAAQ,EAAY,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;cAqBzF,CAAC,CAAQ,EAAE,EAAE;IACrB,OAAO,CAAC,GAAG,CAAE,CAAC,CAAC,MAA2B,CAAC,KAAK,CAAC,CAAA;AACnD,CAAC;WACM,IAAI;aACF,KAAK;gBACF,QAAQ;;;CAGvB,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACxC,OAAO,CAAC,IAAI,GAAG;IACb,IAAI,EAAE,gBAAgB;IACtB,KAAK,EAAE;QACL,CAAC,EAAE,GAAG;QACN,CAAC,EAAE,GAAG;QACN,CAAC,EAAE,GAAG;KACP;CACF,CAAA","sourcesContent":["import '../src/ox-input-partition-keys.js'\n\nimport { html, TemplateResult } from 'lit'\n\nexport default {\n  title: 'ox-input-partition-keys',\n  component: 'ox-input-partition-keys',\n  argTypes: {\n    value: { control: 'object' },\n    name: { control: 'text' },\n    disabled: { control: 'boolean' }\n  }\n}\n\ninterface Story<T> {\n  (args: T): TemplateResult\n  args?: Partial<T>\n  argTypes?: Record<string, unknown>\n}\n\ninterface ArgTypes {\n  name?: string\n  value?: object\n  disabled?: boolean\n}\n\nconst Template: Story<ArgTypes> = ({ name = 'partition-keys', value = {}, disabled }: ArgTypes) => html`\n  <link href=\"/themes/app-theme.css\" rel=\"stylesheet\" />\n\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n  <style>\n    body {\n    }\n  </style>\n\n  <ox-input-partition-keys\n    @change=${(e: Event) => {\n      console.log((e.target as HTMLInputElement).value)\n    }}\n    name=${name}\n    .value=${value}\n    ?disabled=${disabled}\n  >\n  </ox-input-partition-keys>\n`\n\nexport const Regular = Template.bind({})\nRegular.args = {\n  name: 'partition-keys',\n  value: {\n    A: 'A',\n    B: 'B',\n    C: 'C'\n  }\n}\n"]}
+{"version":3,"file":"ox-input-partition-keys.stories.js","sourceRoot":"","sources":["../../stories/ox-input-partition-keys.stories.ts"],"names":[],"mappings":"AAAA,OAAO,mCAAmC,CAAA;AAE1C,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAC1C,OAAO,EAAE,MAAM,IAAI,iBAAiB,EAAE,MAAM,8CAA8C,CAAA;AAE1F,eAAe;IACb,KAAK,EAAE,yBAAyB;IAChC,SAAS,EAAE,yBAAyB;IACpC,QAAQ,EAAE;QACR,KAAK,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;QAC5B,IAAI,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QACzB,QAAQ,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;QAChC,KAAK,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,OAAO,EAAE,MAAM,CAAC,EAAE;KACzD;CACF,CAAA;AAeD,MAAM,QAAQ,GAAoB,CAAC,EACjC,IAAI,GAAG,gBAAgB,EACvB,KAAK,GAAG,EAAE,EACV,QAAQ,EACR,KAAK,GAAG,OAAO,EACN,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;MAqBd,iBAAiB,CAAC,OAAO;;;;;;;;;;;;;;;mCAeI,KAAK;;;;;gBAKxB,CAAC,CAAQ,EAAE,EAAE;IACrB,OAAO,CAAC,GAAG,CAAE,CAAC,CAAC,MAA2B,CAAC,KAAK,CAAC,CAAA;AACnD,CAAC;aACM,IAAI;eACF,KAAK;kBACF,QAAQ;;;;CAIzB,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACxC,OAAO,CAAC,IAAI,GAAG;IACb,IAAI,EAAE,gBAAgB;IACtB,KAAK,EAAE;QACL,CAAC,EAAE,GAAG;QACN,CAAC,EAAE,GAAG;QACN,CAAC,EAAE,GAAG;KACP;CACF,CAAA","sourcesContent":["import '../src/ox-input-partition-keys.js'\n\nimport { html, TemplateResult } from 'lit'\nimport { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles'\n\nexport default {\n  title: 'ox-input-partition-keys',\n  component: 'ox-input-partition-keys',\n  argTypes: {\n    value: { control: 'object' },\n    name: { control: 'text' },\n    disabled: { control: 'boolean' },\n    theme: { control: 'select', options: ['light', 'dark'] }\n  }\n}\n\ninterface Story<T> {\n  (args: T): TemplateResult\n  args?: Partial<T>\n  argTypes?: Record<string, unknown>\n}\n\ninterface ArgTypes {\n  name?: string\n  value?: object\n  disabled?: boolean\n  theme?: string\n}\n\nconst Template: Story<ArgTypes> = ({\n  name = 'partition-keys',\n  value = {},\n  disabled,\n  theme = 'light'\n}: ArgTypes) => html`\n  <link href=\"https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap\" rel=\"stylesheet\" />\n\n  <link href=\"/themes/light.css\" rel=\"stylesheet\" />\n  <link href=\"/themes/dark.css\" rel=\"stylesheet\" />\n  <link href=\"/themes/spacing.css\" rel=\"stylesheet\" />\n\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n\n  <style>\n    ${MDTypeScaleStyles.cssText}\n  </style>\n\n  <style>\n    .container {\n      height: 500px;\n      text-align: center;\n      padding: 20px;\n\n      background-color: var(--md-sys-color-primary-container);\n      color: var(--md-sys-color-on-primary-container);\n    }\n  </style>\n\n  <script>\n    document.body.classList.add('${theme}')\n  </script>\n\n  <div class=\"container md-typescale-body-large-prominent\">\n    <ox-input-partition-keys\n      @change=${(e: Event) => {\n        console.log((e.target as HTMLInputElement).value)\n      }}\n      name=${name}\n      .value=${value}\n      ?disabled=${disabled}\n    >\n    </ox-input-partition-keys>\n  </div>\n`\n\nexport const Regular = Template.bind({})\nRegular.args = {\n  name: 'partition-keys',\n  value: {\n    A: 'A',\n    B: 'B',\n    C: 'C'\n  }\n}\n"]}

package/dist/stories/ox-input-privilege.stories.d.ts

@@ -14,6 +14,10 @@ declare const _default: {
         disabled: {
             control: string;
         };
+        theme: {
+            control: string;
+            options: string[];
+        };
     };
 };
 export default _default;
@@ -36,5 +40,6 @@ interface ArgTypes {
         super: boolean;
     } | null;
     disabled?: boolean;
+    theme?: string;
 }
 export declare const Regular: Story<ArgTypes>;

package/dist/stories/ox-input-privilege.stories.js

@@ -1,17 +1,23 @@
 import '../src/ox-input-privilege.js';
 import '../src/locale/locale-picker.js';
 import { html } from 'lit';
+import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles';
 export default {
     title: 'ox-input-privilege',
     component: 'ox-input-privilege',
     argTypes: {
         value: { control: 'number' },
         name: { control: 'text' },
-        disabled: { control: 'boolean' }
+        disabled: { control: 'boolean' },
+        theme: { control: 'select', options: ['light', 'dark'] }
     }
 };
-const Template = ({ name = 'privilege', value = null, privileges, disabled }) => html `
-  <link href="/themes/app-theme.css" rel="stylesheet" />
+const Template = ({ name = 'privilege', value = null, privileges, disabled, theme = 'light' }) => html `
+  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet" />
+
+  <link href="/themes/light.css" rel="stylesheet" />
+  <link href="/themes/dark.css" rel="stylesheet" />
+  <link href="/themes/spacing.css" rel="stylesheet" />
 
   <link
     href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
@@ -25,29 +31,41 @@ const Template = ({ name = 'privilege', value = null, privileges, disabled }) =>
     href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1"
     rel="stylesheet"
   />
+
   <style>
-    body {
-    }
+    ${MDTypeScaleStyles.cssText}
+  </style>
 
-    ox-input-privilege {
-      width: 100%;
-      min-height: 500px;
+  <style>
+    .container {
+      height: 500px;
+      text-align: center;
+      padding: 20px;
+
+      background-color: var(--md-sys-color-primary-container);
+      color: var(--md-sys-color-on-primary-container);
     }
   </style>
 
-  <locale-picker></locale-picker>
-  <br /><br />
+  <script>
+    document.body.classList.add('${theme}')
+  </script>
+
+  <div class="container md-typescale-body-large-prominent">
+    <locale-picker></locale-picker>
+    <br /><br />
 
-  <ox-input-privilege
-    @change=${(e) => {
+    <ox-input-privilege
+      @change=${(e) => {
     console.log(e.target.value);
 }}
-    name=${name}
-    .value=${value}
-    .privileges=${privileges}
-    ?disabled=${disabled}
-  >
-  </ox-input-privilege>
+      name=${name}
+      .value=${value}
+      .privileges=${privileges}
+      ?disabled=${disabled}
+    >
+    </ox-input-privilege>
+  </div>
 `;
 export const Regular = Template.bind({});
 Regular.args = {

package/dist/stories/ox-input-privilege.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"ox-input-privilege.stories.js","sourceRoot":"","sources":["../../stories/ox-input-privilege.stories.ts"],"names":[],"mappings":"AAAA,OAAO,8BAA8B,CAAA;AACrC,OAAO,gCAAgC,CAAA;AAEvC,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAE1C,eAAe;IACb,KAAK,EAAE,oBAAoB;IAC3B,SAAS,EAAE,oBAAoB;IAC/B,QAAQ,EAAE;QACR,KAAK,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;QAC5B,IAAI,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QACzB,QAAQ,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;KACjC;CACF,CAAA;AAoBD,MAAM,QAAQ,GAAoB,CAAC,EAAE,IAAI,GAAG,WAAW,EAAE,KAAK,GAAG,IAAI,EAAE,UAAU,EAAE,QAAQ,EAAY,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cA6BlG,CAAC,CAAQ,EAAE,EAAE;IACrB,OAAO,CAAC,GAAG,CAAE,CAAC,CAAC,MAA2B,CAAC,KAAK,CAAC,CAAA;AACnD,CAAC;WACM,IAAI;aACF,KAAK;kBACA,UAAU;gBACZ,QAAQ;;;CAGvB,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACxC,OAAO,CAAC,IAAI,GAAG;IACb,IAAI,EAAE,WAAW;IACjB,UAAU,EAAE;QACV;YACE,IAAI,EAAE,OAAO;YACb,QAAQ,EAAE,KAAK;YACf,WAAW,EAAE,cAAc;SAC5B;QACD;YACE,IAAI,EAAE,UAAU;YAChB,QAAQ,EAAE,KAAK;YACf,WAAW,EAAE,cAAc;SAC5B;KACF;IACD,KAAK,EAAE;QACL,SAAS,EAAE,UAAU;QACrB,QAAQ,EAAE,KAAK;QACf,KAAK,EAAE,IAAI;QACX,KAAK,EAAE,IAAI;KACZ;CACF,CAAA","sourcesContent":["import '../src/ox-input-privilege.js'\nimport '../src/locale/locale-picker.js'\n\nimport { html, TemplateResult } from 'lit'\n\nexport default {\n  title: 'ox-input-privilege',\n  component: 'ox-input-privilege',\n  argTypes: {\n    value: { control: 'number' },\n    name: { control: 'text' },\n    disabled: { control: 'boolean' }\n  }\n}\n\ninterface Story<T> {\n  (args: T): TemplateResult\n  args?: Partial<T>\n  argTypes?: Record<string, unknown>\n}\n\ninterface ArgTypes {\n  name?: string\n  privileges: { name: string; category: string; description: string }[]\n  value?: {\n    privilege: string\n    category: string\n    owner: boolean\n    super: boolean\n  } | null\n  disabled?: boolean\n}\n\nconst Template: Story<ArgTypes> = ({ name = 'privilege', value = null, privileges, disabled }: ArgTypes) => html`\n  <link href=\"/themes/app-theme.css\" rel=\"stylesheet\" />\n\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n  <style>\n    body {\n    }\n\n    ox-input-privilege {\n      width: 100%;\n      min-height: 500px;\n    }\n  </style>\n\n  <locale-picker></locale-picker>\n  <br /><br />\n\n  <ox-input-privilege\n    @change=${(e: Event) => {\n      console.log((e.target as HTMLInputElement).value)\n    }}\n    name=${name}\n    .value=${value}\n    .privileges=${privileges}\n    ?disabled=${disabled}\n  >\n  </ox-input-privilege>\n`\n\nexport const Regular = Template.bind({})\nRegular.args = {\n  name: 'privilege',\n  privileges: [\n    {\n      name: 'query',\n      category: 'aaa',\n      description: 'readable aaa'\n    },\n    {\n      name: 'mutation',\n      category: 'aaa',\n      description: 'writable aaa'\n    }\n  ],\n  value: {\n    privilege: 'mutation',\n    category: 'aaa',\n    owner: true,\n    super: true\n  }\n}\n"]}
+{"version":3,"file":"ox-input-privilege.stories.js","sourceRoot":"","sources":["../../stories/ox-input-privilege.stories.ts"],"names":[],"mappings":"AAAA,OAAO,8BAA8B,CAAA;AACrC,OAAO,gCAAgC,CAAA;AAEvC,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAC1C,OAAO,EAAE,MAAM,IAAI,iBAAiB,EAAE,MAAM,8CAA8C,CAAA;AAE1F,eAAe;IACb,KAAK,EAAE,oBAAoB;IAC3B,SAAS,EAAE,oBAAoB;IAC/B,QAAQ,EAAE;QACR,KAAK,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;QAC5B,IAAI,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QACzB,QAAQ,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;QAChC,KAAK,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,OAAO,EAAE,MAAM,CAAC,EAAE;KACzD;CACF,CAAA;AAqBD,MAAM,QAAQ,GAAoB,CAAC,EACjC,IAAI,GAAG,WAAW,EAClB,KAAK,GAAG,IAAI,EACZ,UAAU,EACV,QAAQ,EACR,KAAK,GAAG,OAAO,EACN,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;MAqBd,iBAAiB,CAAC,OAAO;;;;;;;;;;;;;;;mCAeI,KAAK;;;;;;;;gBAQxB,CAAC,CAAQ,EAAE,EAAE;IACrB,OAAO,CAAC,GAAG,CAAE,CAAC,CAAC,MAA2B,CAAC,KAAK,CAAC,CAAA;AACnD,CAAC;aACM,IAAI;eACF,KAAK;oBACA,UAAU;kBACZ,QAAQ;;;;CAIzB,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACxC,OAAO,CAAC,IAAI,GAAG;IACb,IAAI,EAAE,WAAW;IACjB,UAAU,EAAE;QACV;YACE,IAAI,EAAE,OAAO;YACb,QAAQ,EAAE,KAAK;YACf,WAAW,EAAE,cAAc;SAC5B;QACD;YACE,IAAI,EAAE,UAAU;YAChB,QAAQ,EAAE,KAAK;YACf,WAAW,EAAE,cAAc;SAC5B;KACF;IACD,KAAK,EAAE;QACL,SAAS,EAAE,UAAU;QACrB,QAAQ,EAAE,KAAK;QACf,KAAK,EAAE,IAAI;QACX,KAAK,EAAE,IAAI;KACZ;CACF,CAAA","sourcesContent":["import '../src/ox-input-privilege.js'\nimport '../src/locale/locale-picker.js'\n\nimport { html, TemplateResult } from 'lit'\nimport { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles'\n\nexport default {\n  title: 'ox-input-privilege',\n  component: 'ox-input-privilege',\n  argTypes: {\n    value: { control: 'number' },\n    name: { control: 'text' },\n    disabled: { control: 'boolean' },\n    theme: { control: 'select', options: ['light', 'dark'] }\n  }\n}\n\ninterface Story<T> {\n  (args: T): TemplateResult\n  args?: Partial<T>\n  argTypes?: Record<string, unknown>\n}\n\ninterface ArgTypes {\n  name?: string\n  privileges: { name: string; category: string; description: string }[]\n  value?: {\n    privilege: string\n    category: string\n    owner: boolean\n    super: boolean\n  } | null\n  disabled?: boolean\n  theme?: string\n}\n\nconst Template: Story<ArgTypes> = ({\n  name = 'privilege',\n  value = null,\n  privileges,\n  disabled,\n  theme = 'light'\n}: ArgTypes) => html`\n  <link href=\"https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap\" rel=\"stylesheet\" />\n\n  <link href=\"/themes/light.css\" rel=\"stylesheet\" />\n  <link href=\"/themes/dark.css\" rel=\"stylesheet\" />\n  <link href=\"/themes/spacing.css\" rel=\"stylesheet\" />\n\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n\n  <style>\n    ${MDTypeScaleStyles.cssText}\n  </style>\n\n  <style>\n    .container {\n      height: 500px;\n      text-align: center;\n      padding: 20px;\n\n      background-color: var(--md-sys-color-primary-container);\n      color: var(--md-sys-color-on-primary-container);\n    }\n  </style>\n\n  <script>\n    document.body.classList.add('${theme}')\n  </script>\n\n  <div class=\"container md-typescale-body-large-prominent\">\n    <locale-picker></locale-picker>\n    <br /><br />\n\n    <ox-input-privilege\n      @change=${(e: Event) => {\n        console.log((e.target as HTMLInputElement).value)\n      }}\n      name=${name}\n      .value=${value}\n      .privileges=${privileges}\n      ?disabled=${disabled}\n    >\n    </ox-input-privilege>\n  </div>\n`\n\nexport const Regular = Template.bind({})\nRegular.args = {\n  name: 'privilege',\n  privileges: [\n    {\n      name: 'query',\n      category: 'aaa',\n      description: 'readable aaa'\n    },\n    {\n      name: 'mutation',\n      category: 'aaa',\n      description: 'writable aaa'\n    }\n  ],\n  value: {\n    privilege: 'mutation',\n    category: 'aaa',\n    owner: true,\n    super: true\n  }\n}\n"]}

package/dist/stories/ox-input-quantifier.stories.d.ts

@@ -13,6 +13,10 @@ declare const _default: {
         disabled: {
             control: string;
         };
+        theme: {
+            control: string;
+            options: string[];
+        };
     };
 };
 export default _default;
@@ -25,5 +29,6 @@ interface ArgTypes {
     name?: string;
     value?: number[];
     disabled?: boolean;
+    theme?: string;
 }
 export declare const Regular: Story<ArgTypes>;

package/dist/stories/ox-input-quantifier.stories.js

@@ -1,16 +1,22 @@
 import '../src/ox-input-quantifier.js';
 import { html } from 'lit';
+import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles';
 export default {
     title: 'ox-input-quantifier',
     component: 'ox-input-quantifier',
     argTypes: {
         name: { control: 'text' },
         value: { control: 'array' },
-        disabled: { control: 'boolean' }
+        disabled: { control: 'boolean' },
+        theme: { control: 'select', options: ['light', 'dark'] }
     }
 };
-const Template = ({ name = 'quantifier', value, disabled }) => html `
-  <link href="/themes/app-theme.css" rel="stylesheet" />
+const Template = ({ name = 'quantifier', value, disabled, theme = 'light' }) => html `
+  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet" />
+
+  <link href="/themes/light.css" rel="stylesheet" />
+  <link href="/themes/dark.css" rel="stylesheet" />
+  <link href="/themes/spacing.css" rel="stylesheet" />
 
   <link
     href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
@@ -25,13 +31,34 @@ const Template = ({ name = 'quantifier', value, disabled }) => html `
     rel="stylesheet"
   />
 
-  <ox-input-quantifier
-    name=${name}
-    .value=${value}
-    @change=${(e) => console.log(e.target.value)}
-    ?disabled=${disabled}
-  >
-  </ox-input-quantifier>
+  <style>
+    ${MDTypeScaleStyles.cssText}
+  </style>
+
+  <style>
+    .container {
+      height: 500px;
+      text-align: center;
+      padding: 20px;
+
+      background-color: var(--md-sys-color-primary-container);
+      color: var(--md-sys-color-on-primary-container);
+    }
+  </style>
+
+  <script>
+    document.body.classList.add('${theme}')
+  </script>
+
+  <div class="container md-typescale-body-large-prominent">
+    <ox-input-quantifier
+      name=${name}
+      .value=${value}
+      @change=${(e) => console.log(e.target.value)}
+      ?disabled=${disabled}
+    >
+    </ox-input-quantifier>
+  </div>
 `;
 export const Regular = Template.bind({});
 Regular.args = {

package/dist/stories/ox-input-quantifier.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"ox-input-quantifier.stories.js","sourceRoot":"","sources":["../../stories/ox-input-quantifier.stories.ts"],"names":[],"mappings":"AAAA,OAAO,+BAA+B,CAAA;AAEtC,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAI1C,eAAe;IACb,KAAK,EAAE,qBAAqB;IAC5B,SAAS,EAAE,qBAAqB;IAChC,QAAQ,EAAE;QACR,IAAI,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QACzB,KAAK,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE;QAC3B,QAAQ,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;KACjC;CACF,CAAA;AAcD,MAAM,QAAQ,GAAoB,CAAC,EAAE,IAAI,GAAG,YAAY,EAAE,KAAK,EAAE,QAAQ,EAAY,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;WAiBnF,IAAI;aACF,KAAK;cACJ,CAAC,CAAQ,EAAE,EAAE,CAAC,OAAO,CAAC,GAAG,CAAE,CAAC,CAAC,MAA4B,CAAC,KAAK,CAAC;gBAC9D,QAAQ;;;CAGvB,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACxC,OAAO,CAAC,IAAI,GAAG;IACb,IAAI,EAAE,YAAY;IAClB,KAAK,EAAE,CAAC,EAAE,EAAE,GAAG,CAAC;CACjB,CAAA","sourcesContent":["import '../src/ox-input-quantifier.js'\n\nimport { html, TemplateResult } from 'lit'\n\nimport { OxInputQuantifier } from '../src/ox-input-quantifier.js'\n\nexport default {\n  title: 'ox-input-quantifier',\n  component: 'ox-input-quantifier',\n  argTypes: {\n    name: { control: 'text' },\n    value: { control: 'array' },\n    disabled: { control: 'boolean' }\n  }\n}\n\ninterface Story<T> {\n  (args: T): TemplateResult\n  args?: Partial<T>\n  argTypes?: Record<string, unknown>\n}\n\ninterface ArgTypes {\n  name?: string\n  value?: number[]\n  disabled?: boolean\n}\n\nconst Template: Story<ArgTypes> = ({ name = 'quantifier', value, disabled }: ArgTypes) => html`\n  <link href=\"/themes/app-theme.css\" rel=\"stylesheet\" />\n\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n\n  <ox-input-quantifier\n    name=${name}\n    .value=${value}\n    @change=${(e: Event) => console.log((e.target as OxInputQuantifier).value)}\n    ?disabled=${disabled}\n  >\n  </ox-input-quantifier>\n`\n\nexport const Regular = Template.bind({})\nRegular.args = {\n  name: 'quantifier',\n  value: [10, 100]\n}\n"]}
+{"version":3,"file":"ox-input-quantifier.stories.js","sourceRoot":"","sources":["../../stories/ox-input-quantifier.stories.ts"],"names":[],"mappings":"AAAA,OAAO,+BAA+B,CAAA;AAEtC,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAC1C,OAAO,EAAE,MAAM,IAAI,iBAAiB,EAAE,MAAM,8CAA8C,CAAA;AAI1F,eAAe;IACb,KAAK,EAAE,qBAAqB;IAC5B,SAAS,EAAE,qBAAqB;IAChC,QAAQ,EAAE;QACR,IAAI,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QACzB,KAAK,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE;QAC3B,QAAQ,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;QAChC,KAAK,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,OAAO,EAAE,MAAM,CAAC,EAAE;KACzD;CACF,CAAA;AAeD,MAAM,QAAQ,GAAoB,CAAC,EAAE,IAAI,GAAG,YAAY,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,GAAG,OAAO,EAAY,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;MAqBzG,iBAAiB,CAAC,OAAO;;;;;;;;;;;;;;;mCAeI,KAAK;;;;;aAK3B,IAAI;eACF,KAAK;gBACJ,CAAC,CAAQ,EAAE,EAAE,CAAC,OAAO,CAAC,GAAG,CAAE,CAAC,CAAC,MAA4B,CAAC,KAAK,CAAC;kBAC9D,QAAQ;;;;CAIzB,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACxC,OAAO,CAAC,IAAI,GAAG;IACb,IAAI,EAAE,YAAY;IAClB,KAAK,EAAE,CAAC,EAAE,EAAE,GAAG,CAAC;CACjB,CAAA","sourcesContent":["import '../src/ox-input-quantifier.js'\n\nimport { html, TemplateResult } from 'lit'\nimport { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles'\n\nimport { OxInputQuantifier } from '../src/ox-input-quantifier.js'\n\nexport default {\n  title: 'ox-input-quantifier',\n  component: 'ox-input-quantifier',\n  argTypes: {\n    name: { control: 'text' },\n    value: { control: 'array' },\n    disabled: { control: 'boolean' },\n    theme: { control: 'select', options: ['light', 'dark'] }\n  }\n}\n\ninterface Story<T> {\n  (args: T): TemplateResult\n  args?: Partial<T>\n  argTypes?: Record<string, unknown>\n}\n\ninterface ArgTypes {\n  name?: string\n  value?: number[]\n  disabled?: boolean\n  theme?: string\n}\n\nconst Template: Story<ArgTypes> = ({ name = 'quantifier', value, disabled, theme = 'light' }: ArgTypes) => html`\n  <link href=\"https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap\" rel=\"stylesheet\" />\n\n  <link href=\"/themes/light.css\" rel=\"stylesheet\" />\n  <link href=\"/themes/dark.css\" rel=\"stylesheet\" />\n  <link href=\"/themes/spacing.css\" rel=\"stylesheet\" />\n\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n\n  <style>\n    ${MDTypeScaleStyles.cssText}\n  </style>\n\n  <style>\n    .container {\n      height: 500px;\n      text-align: center;\n      padding: 20px;\n\n      background-color: var(--md-sys-color-primary-container);\n      color: var(--md-sys-color-on-primary-container);\n    }\n  </style>\n\n  <script>\n    document.body.classList.add('${theme}')\n  </script>\n\n  <div class=\"container md-typescale-body-large-prominent\">\n    <ox-input-quantifier\n      name=${name}\n      .value=${value}\n      @change=${(e: Event) => console.log((e.target as OxInputQuantifier).value)}\n      ?disabled=${disabled}\n    >\n    </ox-input-quantifier>\n  </div>\n`\n\nexport const Regular = Template.bind({})\nRegular.args = {\n  name: 'quantifier',\n  value: [10, 100]\n}\n"]}

package/dist/stories/ox-input-range.stories.d.ts

@@ -22,6 +22,10 @@ declare const _default: {
         disabled: {
             control: string;
         };
+        theme: {
+            control: string;
+            options: string[];
+        };
     };
 };
 export default _default;
@@ -37,5 +41,6 @@ interface ArgTypes {
     min?: number;
     max?: number;
     disabled?: boolean;
+    theme?: string;
 }
 export declare const Regular: Story<ArgTypes>;

package/dist/stories/ox-input-range.stories.js

@@ -1,5 +1,6 @@
 import '../src/ox-input-range.js';
 import { html } from 'lit';
+import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles';
 export default {
     title: 'ox-input-range',
     component: 'ox-input-range',
@@ -9,11 +10,16 @@ export default {
         step: { control: 'number' },
         min: { control: 'number' },
         max: { control: 'number' },
-        disabled: { control: 'boolean' }
+        disabled: { control: 'boolean' },
+        theme: { control: 'select', options: ['light', 'dark'] }
     }
 };
-const Template = ({ name = 'range', value = 0, step = 1, min = 0, max = 100, disabled }) => html `
-  <link href="/themes/app-theme.css" rel="stylesheet" />
+const Template = ({ name = 'range', value = 0, step = 1, min = 0, max = 100, disabled, theme = 'light' }) => html `
+  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet" />
+
+  <link href="/themes/light.css" rel="stylesheet" />
+  <link href="/themes/dark.css" rel="stylesheet" />
+  <link href="/themes/spacing.css" rel="stylesheet" />
 
   <link
     href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
@@ -28,8 +34,29 @@ const Template = ({ name = 'range', value = 0, step = 1, min = 0, max = 100, dis
     rel="stylesheet"
   />
 
-  <ox-input-range name=${name} value=${value} step=${step} min=${min} max=${max} ?disabled=${disabled}>
-  </ox-input-range>
+  <style>
+    ${MDTypeScaleStyles.cssText}
+  </style>
+
+  <style>
+    .container {
+      height: 500px;
+      text-align: center;
+      padding: 20px;
+
+      background-color: var(--md-sys-color-primary-container);
+      color: var(--md-sys-color-on-primary-container);
+    }
+  </style>
+
+  <script>
+    document.body.classList.add('${theme}')
+  </script>
+
+  <div class="container md-typescale-body-large-prominent">
+    <ox-input-range name=${name} value=${value} step=${step} min=${min} max=${max} ?disabled=${disabled}>
+    </ox-input-range>
+  </div>
 `;
 export const Regular = Template.bind({});
 Regular.args = {

package/dist/stories/ox-input-range.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"ox-input-range.stories.js","sourceRoot":"","sources":["../../stories/ox-input-range.stories.ts"],"names":[],"mappings":"AAAA,OAAO,0BAA0B,CAAA;AAEjC,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAE1C,eAAe;IACb,KAAK,EAAE,gBAAgB;IACvB,SAAS,EAAE,gBAAgB;IAC3B,QAAQ,EAAE;QACR,IAAI,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QACzB,KAAK,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;QAC5B,IAAI,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;QAC3B,GAAG,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;QAC1B,GAAG,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;QAC1B,QAAQ,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;KACjC;CACF,CAAA;AAiBD,MAAM,QAAQ,GAAoB,CAAC,EACjC,IAAI,GAAG,OAAO,EACd,KAAK,GAAG,CAAC,EACT,IAAI,GAAG,CAAC,EACR,GAAG,GAAG,CAAC,EACP,GAAG,GAAG,GAAG,EACT,QAAQ,EACC,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;yBAgBK,IAAI,UAAU,KAAK,SAAS,IAAI,QAAQ,GAAG,QAAQ,GAAG,cAAc,QAAQ;;CAEpG,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACxC,OAAO,CAAC,IAAI,GAAG;IACb,IAAI,EAAE,OAAO;IACb,KAAK,EAAE,CAAC;IACR,IAAI,EAAE,CAAC;IACP,GAAG,EAAE,CAAC;IACN,GAAG,EAAE,GAAG;CACT,CAAA","sourcesContent":["import '../src/ox-input-range.js'\n\nimport { html, TemplateResult } from 'lit'\n\nexport default {\n  title: 'ox-input-range',\n  component: 'ox-input-range',\n  argTypes: {\n    name: { control: 'text' },\n    value: { control: 'number' },\n    step: { control: 'number' },\n    min: { control: 'number' },\n    max: { control: 'number' },\n    disabled: { control: 'boolean' }\n  }\n}\n\ninterface Story<T> {\n  (args: T): TemplateResult\n  args?: Partial<T>\n  argTypes?: Record<string, unknown>\n}\n\ninterface ArgTypes {\n  name?: string\n  value?: number\n  step?: number\n  min?: number\n  max?: number\n  disabled?: boolean\n}\n\nconst Template: Story<ArgTypes> = ({\n  name = 'range',\n  value = 0,\n  step = 1,\n  min = 0,\n  max = 100,\n  disabled\n}: ArgTypes) => html`\n  <link href=\"/themes/app-theme.css\" rel=\"stylesheet\" />\n\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n\n  <ox-input-range name=${name} value=${value} step=${step} min=${min} max=${max} ?disabled=${disabled}>\n  </ox-input-range>\n`\n\nexport const Regular = Template.bind({})\nRegular.args = {\n  name: 'range',\n  value: 0,\n  step: 1,\n  min: 0,\n  max: 100\n}\n"]}
+{"version":3,"file":"ox-input-range.stories.js","sourceRoot":"","sources":["../../stories/ox-input-range.stories.ts"],"names":[],"mappings":"AAAA,OAAO,0BAA0B,CAAA;AAEjC,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAC1C,OAAO,EAAE,MAAM,IAAI,iBAAiB,EAAE,MAAM,8CAA8C,CAAA;AAE1F,eAAe;IACb,KAAK,EAAE,gBAAgB;IACvB,SAAS,EAAE,gBAAgB;IAC3B,QAAQ,EAAE;QACR,IAAI,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QACzB,KAAK,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;QAC5B,IAAI,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;QAC3B,GAAG,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;QAC1B,GAAG,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;QAC1B,QAAQ,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;QAChC,KAAK,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,OAAO,EAAE,MAAM,CAAC,EAAE;KACzD;CACF,CAAA;AAkBD,MAAM,QAAQ,GAAoB,CAAC,EACjC,IAAI,GAAG,OAAO,EACd,KAAK,GAAG,CAAC,EACT,IAAI,GAAG,CAAC,EACR,GAAG,GAAG,CAAC,EACP,GAAG,GAAG,GAAG,EACT,QAAQ,EACR,KAAK,GAAG,OAAO,EACN,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;MAqBd,iBAAiB,CAAC,OAAO;;;;;;;;;;;;;;;mCAeI,KAAK;;;;2BAIb,IAAI,UAAU,KAAK,SAAS,IAAI,QAAQ,GAAG,QAAQ,GAAG,cAAc,QAAQ;;;CAGtG,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACxC,OAAO,CAAC,IAAI,GAAG;IACb,IAAI,EAAE,OAAO;IACb,KAAK,EAAE,CAAC;IACR,IAAI,EAAE,CAAC;IACP,GAAG,EAAE,CAAC;IACN,GAAG,EAAE,GAAG;CACT,CAAA","sourcesContent":["import '../src/ox-input-range.js'\n\nimport { html, TemplateResult } from 'lit'\nimport { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles'\n\nexport default {\n  title: 'ox-input-range',\n  component: 'ox-input-range',\n  argTypes: {\n    name: { control: 'text' },\n    value: { control: 'number' },\n    step: { control: 'number' },\n    min: { control: 'number' },\n    max: { control: 'number' },\n    disabled: { control: 'boolean' },\n    theme: { control: 'select', options: ['light', 'dark'] }\n  }\n}\n\ninterface Story<T> {\n  (args: T): TemplateResult\n  args?: Partial<T>\n  argTypes?: Record<string, unknown>\n}\n\ninterface ArgTypes {\n  name?: string\n  value?: number\n  step?: number\n  min?: number\n  max?: number\n  disabled?: boolean\n  theme?: string\n}\n\nconst Template: Story<ArgTypes> = ({\n  name = 'range',\n  value = 0,\n  step = 1,\n  min = 0,\n  max = 100,\n  disabled,\n  theme = 'light'\n}: ArgTypes) => html`\n  <link href=\"https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap\" rel=\"stylesheet\" />\n\n  <link href=\"/themes/light.css\" rel=\"stylesheet\" />\n  <link href=\"/themes/dark.css\" rel=\"stylesheet\" />\n  <link href=\"/themes/spacing.css\" rel=\"stylesheet\" />\n\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n\n  <style>\n    ${MDTypeScaleStyles.cssText}\n  </style>\n\n  <style>\n    .container {\n      height: 500px;\n      text-align: center;\n      padding: 20px;\n\n      background-color: var(--md-sys-color-primary-container);\n      color: var(--md-sys-color-on-primary-container);\n    }\n  </style>\n\n  <script>\n    document.body.classList.add('${theme}')\n  </script>\n\n  <div class=\"container md-typescale-body-large-prominent\">\n    <ox-input-range name=${name} value=${value} step=${step} min=${min} max=${max} ?disabled=${disabled}>\n    </ox-input-range>\n  </div>\n`\n\nexport const Regular = Template.bind({})\nRegular.args = {\n  name: 'range',\n  value: 0,\n  step: 1,\n  min: 0,\n  max: 100\n}\n"]}

package/dist/stories/ox-input-search.stories.d.ts

@@ -19,6 +19,10 @@ declare const _default: {
         disabled: {
             control: string;
         };
+        theme: {
+            control: string;
+            options: string[];
+        };
     };
 };
 export default _default;
@@ -33,5 +37,6 @@ interface ArgTypes {
     value?: string;
     selectAfterChange?: boolean;
     disabled?: boolean;
+    theme?: string;
 }
 export declare const Regular: Story<ArgTypes>;

package/dist/stories/ox-input-search.stories.js

@@ -1,5 +1,6 @@
 import '../src/ox-input-search.js';
 import { html } from 'lit';
+import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles';
 export default {
     title: 'ox-input-search',
     component: 'ox-input-search',
@@ -8,11 +9,16 @@ export default {
         name: { control: 'text' },
         value: { control: 'text' },
         selectAfterChange: { control: 'boolean' },
-        disabled: { control: 'boolean' }
+        disabled: { control: 'boolean' },
+        theme: { control: 'select', options: ['light', 'dark'] }
     }
 };
-const Template = ({ placeholder = 'Search', name = 'hello', value = '', selectAfterChange, disabled }) => html `
-  <link href="/themes/app-theme.css" rel="stylesheet" />
+const Template = ({ placeholder = 'Search', name = 'hello', value = '', selectAfterChange, disabled, theme = 'light' }) => html `
+  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet" />
+
+  <link href="/themes/light.css" rel="stylesheet" />
+  <link href="/themes/dark.css" rel="stylesheet" />
+  <link href="/themes/spacing.css" rel="stylesheet" />
 
   <link
     href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
@@ -26,19 +32,36 @@ const Template = ({ placeholder = 'Search', name = 'hello', value = '', selectAf
     href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1"
     rel="stylesheet"
   />
+
   <style>
-    body {
+    ${MDTypeScaleStyles.cssText}
+  </style>
+
+  <style>
+    .container {
+      height: 500px;
+      text-align: center;
+      padding: 20px;
+
+      background-color: var(--md-sys-color-primary-container);
+      color: var(--md-sys-color-on-primary-container);
     }
   </style>
 
-  <ox-input-search
-    @change=${(e) => console.log('changed', e.target.value)}
-    ?select-after-change=${selectAfterChange}
-    name=${name}
-    .checked=${value}
-    ?disabled=${disabled}
-  >
-  </ox-input-search>
+  <script>
+    document.body.classList.add('${theme}')
+  </script>
+
+  <div class="container md-typescale-body-large-prominent">
+    <ox-input-search
+      @change=${(e) => console.log('changed', e.target.value)}
+      ?select-after-change=${selectAfterChange}
+      name=${name}
+      .checked=${value}
+      ?disabled=${disabled}
+    >
+    </ox-input-search>
+  </div>
 `;
 export const Regular = Template.bind({});
 Regular.args = {