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

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

@@ -1,16 +1,22 @@
 import '../src/ox-input-data.js';
 import { html } from 'lit';
+import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles';
 export default {
     title: 'ox-input-data',
     component: 'ox-input-data',
     argTypes: {
         value: { control: 'text' },
         name: { control: 'text' },
-        disabled: { control: 'boolean' }
+        disabled: { control: 'boolean' },
+        theme: { control: 'select', options: ['light', 'dark'] }
     }
 };
-const Template = ({ name = 'code', value = '', disabled }) => html `
-  <link href="/themes/app-theme.css" rel="stylesheet" />
+const Template = ({ name = 'code', 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,24 +30,41 @@ const Template = ({ name = 'code', 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>
+    ${MDTypeScaleStyles.cssText}
+  </style>
+
   <style>
-    body {
+    .container {
+      height: 500px;
+      text-align: center;
+      padding: 20px;
+
     }
+
     ox-input-data {
       height: 300px;
+      text-align: start;
     }
   </style>
 
-  <ox-input-data
-    @change=${(e) => {
+  <script>
+    document.body.classList.add('${theme}')
+  </script>
+
+  <div class="container md-typescale-body-large-prominent">
+    <ox-input-data
+      @change=${(e) => {
     const value = e.target.value;
     console.log('value : ', value, typeof value);
 }}
-    name=${name}
-    .value=${value}
-    ?disabled=${disabled}
-  >
-  </ox-input-data>
+      name=${name}
+      .value=${value}
+      ?disabled=${disabled}
+    >
+    </ox-input-data>
+  </div>
 `;
 export const Regular = Template.bind({});
 Regular.args = {

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

@@ -1 +1 @@
-{"version":3,"file":"ox-input-data.stories.js","sourceRoot":"","sources":["../../stories/ox-input-data.stories.ts"],"names":[],"mappings":"AAAA,OAAO,yBAAyB,CAAA;AAEhC,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAE1C,eAAe;IACb,KAAK,EAAE,eAAe;IACtB,SAAS,EAAE,eAAe;IAC1B,QAAQ,EAAE;QACR,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QAC1B,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,MAAM,EAAE,KAAK,GAAG,EAAE,EAAE,QAAQ,EAAY,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;;;;cAwB/E,CAAC,CAAQ,EAAE,EAAE;IACrB,MAAM,KAAK,GAAI,CAAC,CAAC,MAA2B,CAAC,KAAK,CAAA;IAClD,OAAO,CAAC,GAAG,CAAC,UAAU,EAAE,KAAK,EAAE,OAAO,KAAK,CAAC,CAAA;AAC9C,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,MAAM;CACb,CAAA","sourcesContent":["import '../src/ox-input-data.js'\n\nimport { html, TemplateResult } from 'lit'\n\nexport default {\n  title: 'ox-input-data',\n  component: 'ox-input-data',\n  argTypes: {\n    value: { control: 'text' },\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?: string | number | object\n  disabled?: boolean\n}\n\nconst Template: Story<ArgTypes> = ({ name = 'code', 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    ox-input-data {\n      height: 300px;\n    }\n  </style>\n\n  <ox-input-data\n    @change=${(e: Event) => {\n      const value = (e.target as HTMLInputElement).value\n      console.log('value : ', value, typeof value)\n    }}\n    name=${name}\n    .value=${value}\n    ?disabled=${disabled}\n  >\n  </ox-input-data>\n`\n\nexport const Regular = Template.bind({})\nRegular.args = {\n  name: 'data'\n}\n"]}
+{"version":3,"file":"ox-input-data.stories.js","sourceRoot":"","sources":["../../stories/ox-input-data.stories.ts"],"names":[],"mappings":"AAAA,OAAO,yBAAyB,CAAA;AAEhC,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAC1C,OAAO,EAAE,MAAM,IAAI,iBAAiB,EAAE,MAAM,8CAA8C,CAAA;AAE1F,eAAe;IACb,KAAK,EAAE,eAAe;IACtB,SAAS,EAAE,eAAe;IAC1B,QAAQ,EAAE;QACR,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QAC1B,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,MAAM,EAAE,KAAK,GAAG,EAAE,EAAE,QAAQ,EAAE,KAAK,GAAG,OAAO,EAAY,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;MAqBxG,iBAAiB,CAAC,OAAO;;;;;;;;;;;;;;;;;;mCAkBI,KAAK;;;;;gBAKxB,CAAC,CAAQ,EAAE,EAAE;IACrB,MAAM,KAAK,GAAI,CAAC,CAAC,MAA2B,CAAC,KAAK,CAAA;IAClD,OAAO,CAAC,GAAG,CAAC,UAAU,EAAE,KAAK,EAAE,OAAO,KAAK,CAAC,CAAA;AAC9C,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,MAAM;CACb,CAAA","sourcesContent":["import '../src/ox-input-data.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-data',\n  component: 'ox-input-data',\n  argTypes: {\n    value: { control: 'text' },\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?: string | number | object\n  disabled?: boolean\n  theme?: string\n}\n\nconst Template: Story<ArgTypes> = ({ name = 'code', 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    }\n\n    ox-input-data {\n      height: 300px;\n      text-align: start;\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-data\n      @change=${(e: Event) => {\n        const value = (e.target as HTMLInputElement).value\n        console.log('value : ', value, typeof value)\n      }}\n      name=${name}\n      .value=${value}\n      ?disabled=${disabled}\n    >\n    </ox-input-data>\n  </div>\n`\n\nexport const Regular = Template.bind({})\nRegular.args = {\n  name: 'data'\n}\n"]}

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

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

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

@@ -1,17 +1,23 @@
 import '../src/ox-input-duration.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-duration',
     component: 'ox-input-duration',
     argTypes: {
         value: { control: 'number' },
         name: { control: 'text' },
-        disabled: { control: 'boolean' }
+        disabled: { control: 'boolean' },
+        theme: { control: 'select', options: ['light', 'dark'] }
     }
 };
-const Template = ({ name = 'duration', value = 3601, disabled }) => html `
-  <link href="/themes/app-theme.css" rel="stylesheet" />
+const Template = ({ name = 'duration', value = 3601, 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,23 +31,40 @@ const Template = ({ name = 'duration', value = 3601, 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>
 
-  <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-duration
-    @change=${(e) => {
+    <ox-input-duration
+      @change=${(e) => {
     console.log(e.target.value);
 }}
-    name=${name}
-    .value=${value}
-    ?disabled=${disabled}
-  >
-  </ox-input-duration>
+      name=${name}
+      .value=${value}
+      ?disabled=${disabled}
+    >
+    </ox-input-duration>
+  </div>
 `;
 export const Regular = Template.bind({});
 Regular.args = {

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

@@ -1 +1 @@
-{"version":3,"file":"ox-input-duration.stories.js","sourceRoot":"","sources":["../../stories/ox-input-duration.stories.ts"],"names":[],"mappings":"AAAA,OAAO,6BAA6B,CAAA;AACpC,OAAO,gCAAgC,CAAA;AAEvC,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAE1C,eAAe;IACb,KAAK,EAAE,mBAAmB;IAC1B,SAAS,EAAE,mBAAmB;IAC9B,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,UAAU,EAAE,KAAK,GAAG,IAAI,EAAE,QAAQ,EAAY,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;;;;cAwBrF,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,UAAU;IAChB,KAAK,EAAE,IAAI;CACZ,CAAA","sourcesContent":["import '../src/ox-input-duration.js'\nimport '../src/locale/locale-picker.js'\n\nimport { html, TemplateResult } from 'lit'\n\nexport default {\n  title: 'ox-input-duration',\n  component: 'ox-input-duration',\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  value?: number\n  disabled?: boolean\n}\n\nconst Template: Story<ArgTypes> = ({ name = 'duration', value = 3601, 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  <locale-picker></locale-picker>\n  <br /><br />\n\n  <ox-input-duration\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-duration>\n`\n\nexport const Regular = Template.bind({})\nRegular.args = {\n  name: 'duration',\n  value: 3601\n}\n"]}
+{"version":3,"file":"ox-input-duration.stories.js","sourceRoot":"","sources":["../../stories/ox-input-duration.stories.ts"],"names":[],"mappings":"AAAA,OAAO,6BAA6B,CAAA;AACpC,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,mBAAmB;IAC1B,SAAS,EAAE,mBAAmB;IAC9B,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,UAAU,EAAE,KAAK,GAAG,IAAI,EAAE,QAAQ,EAAE,KAAK,GAAG,OAAO,EAAY,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;MAqB9G,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;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,UAAU;IAChB,KAAK,EAAE,IAAI;CACZ,CAAA","sourcesContent":["import '../src/ox-input-duration.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-duration',\n  component: 'ox-input-duration',\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  value?: number\n  disabled?: boolean\n  theme?: string\n}\n\nconst Template: Story<ArgTypes> = ({ name = 'duration', value = 3601, 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    <locale-picker></locale-picker>\n    <br /><br />\n\n    <ox-input-duration\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-duration>\n  </div>\n`\n\nexport const Regular = Template.bind({})\nRegular.args = {\n  name: 'duration',\n  value: 3601\n}\n"]}

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

@@ -31,6 +31,10 @@ declare const _default: {
         disabled: {
             control: string;
         };
+        theme: {
+            control: string;
+            options: string[];
+        };
     };
 };
 export default _default;
@@ -49,5 +53,6 @@ interface ArgTypes {
     hideFileList?: boolean;
     attachFileList?: boolean;
     disabled?: boolean;
+    theme?: string;
 }
 export declare const Regular: Story<ArgTypes>;

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

@@ -1,5 +1,6 @@
 import '../src/ox-input-file.js';
 import { html } from 'lit';
+import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles';
 export default {
     title: 'ox-input-file',
     component: 'ox-input-file',
@@ -12,11 +13,16 @@ export default {
         description: { control: 'text' },
         hideFileList: { control: 'boolean' },
         attachFileList: { control: 'boolean' },
-        disabled: { control: 'boolean' }
+        disabled: { control: 'boolean' },
+        theme: { control: 'select', options: ['light', 'dark'] }
     }
 };
-const Template = ({ label = 'select files', name = 'file', multiple = true, accept, icon, description, hideFileList = false, attachFileList = false, disabled }) => html `
-  <link href="/themes/app-theme.css" rel="stylesheet" />
+const Template = ({ label = 'select files', name = 'file', multiple = true, accept, icon, description, hideFileList = false, attachFileList = false, 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"
@@ -30,23 +36,40 @@ const Template = ({ label = 'select files', name = 'file', multiple = true, acce
     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-file
-    label=${label}
-    name=${name}
-    ?multiple=${multiple}
-    ?hide-filelist=${hideFileList}
-    ?attach-filelist=${attachFileList}
-    accept=${accept}
-    icon=${icon}
-    description=${description}
-    ?disabled=${disabled}
-  >
-  </ox-input-file>
+  <script>
+    document.body.classList.add('${theme}')
+  </script>
+
+  <div class="container md-typescale-body-large-prominent">
+    <ox-input-file
+      label=${label}
+      name=${name}
+      ?multiple=${multiple}
+      ?hide-filelist=${hideFileList}
+      ?attach-filelist=${attachFileList}
+      accept=${accept}
+      icon=${icon}
+      description=${description}
+      ?disabled=${disabled}
+    >
+    </ox-input-file>
+  </div>
 `;
 export const Regular = Template.bind({});
 Regular.args = {

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

@@ -1 +1 @@
-{"version":3,"file":"ox-input-file.stories.js","sourceRoot":"","sources":["../../stories/ox-input-file.stories.ts"],"names":[],"mappings":"AAAA,OAAO,yBAAyB,CAAA;AAEhC,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAE1C,eAAe;IACb,KAAK,EAAE,eAAe;IACtB,SAAS,EAAE,eAAe;IAC1B,QAAQ,EAAE;QACR,IAAI,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QACzB,QAAQ,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;QAChC,MAAM,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QAC3B,IAAI,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QACzB,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QAC1B,WAAW,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QAChC,YAAY,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;QACpC,cAAc,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;QACtC,QAAQ,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;KACjC;CACF,CAAA;AAoBD,MAAM,QAAQ,GAAoB,CAAC,EACjC,KAAK,GAAG,cAAc,EACtB,IAAI,GAAG,MAAM,EACb,QAAQ,GAAG,IAAI,EACf,MAAM,EACN,IAAI,EACJ,WAAW,EACX,YAAY,GAAG,KAAK,EACpB,cAAc,GAAG,KAAK,EACtB,QAAQ,EACC,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;YAqBR,KAAK;WACN,IAAI;gBACC,QAAQ;qBACH,YAAY;uBACV,cAAc;aACxB,MAAM;WACR,IAAI;kBACG,WAAW;gBACb,QAAQ;;;CAGvB,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACxC,OAAO,CAAC,IAAI,GAAG;IACb,KAAK,EAAE,cAAc;IACrB,IAAI,EAAE,OAAO;IACb,QAAQ,EAAE,IAAI;IACd,YAAY,EAAE,KAAK;IACnB,cAAc,EAAE,KAAK;IACrB,MAAM,EAAE,KAAK;IACb,IAAI,EAAE,QAAQ;IACd,WAAW,EAAE,kBAAkB;CAChC,CAAA","sourcesContent":["import '../src/ox-input-file.js'\n\nimport { html, TemplateResult } from 'lit'\n\nexport default {\n  title: 'ox-input-file',\n  component: 'ox-input-file',\n  argTypes: {\n    name: { control: 'text' },\n    multiple: { control: 'boolean' },\n    accept: { control: 'text' },\n    icon: { control: 'text' },\n    label: { control: 'text' },\n    description: { control: 'text' },\n    hideFileList: { control: 'boolean' },\n    attachFileList: { control: 'boolean' },\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  label?: string\n  name?: string\n  multiple?: boolean\n  accept?: string\n  icon?: string\n  description?: string\n  hideFileList?: boolean\n  attachFileList?: boolean\n  disabled?: boolean\n}\n\nconst Template: Story<ArgTypes> = ({\n  label = 'select files',\n  name = 'file',\n  multiple = true,\n  accept,\n  icon,\n  description,\n  hideFileList = false,\n  attachFileList = false,\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  <style>\n    body {\n    }\n  </style>\n\n  <ox-input-file\n    label=${label}\n    name=${name}\n    ?multiple=${multiple}\n    ?hide-filelist=${hideFileList}\n    ?attach-filelist=${attachFileList}\n    accept=${accept}\n    icon=${icon}\n    description=${description}\n    ?disabled=${disabled}\n  >\n  </ox-input-file>\n`\n\nexport const Regular = Template.bind({})\nRegular.args = {\n  label: 'select files',\n  name: 'files',\n  multiple: true,\n  hideFileList: false,\n  attachFileList: false,\n  accept: '*.*',\n  icon: 'upload',\n  description: 'drop files here!'\n}\n"]}
+{"version":3,"file":"ox-input-file.stories.js","sourceRoot":"","sources":["../../stories/ox-input-file.stories.ts"],"names":[],"mappings":"AAAA,OAAO,yBAAyB,CAAA;AAEhC,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAC1C,OAAO,EAAE,MAAM,IAAI,iBAAiB,EAAE,MAAM,8CAA8C,CAAA;AAE1F,eAAe;IACb,KAAK,EAAE,eAAe;IACtB,SAAS,EAAE,eAAe;IAC1B,QAAQ,EAAE;QACR,IAAI,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QACzB,QAAQ,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;QAChC,MAAM,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QAC3B,IAAI,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QACzB,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QAC1B,WAAW,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QAChC,YAAY,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;QACpC,cAAc,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;QACtC,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,KAAK,GAAG,cAAc,EACtB,IAAI,GAAG,MAAM,EACb,QAAQ,GAAG,IAAI,EACf,MAAM,EACN,IAAI,EACJ,WAAW,EACX,YAAY,GAAG,KAAK,EACpB,cAAc,GAAG,KAAK,EACtB,QAAQ,EACR,KAAK,GAAG,OAAO,EACN,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;MAqBd,iBAAiB,CAAC,OAAO;;;;;;;;;;;;;;;mCAeI,KAAK;;;;;cAK1B,KAAK;aACN,IAAI;kBACC,QAAQ;uBACH,YAAY;yBACV,cAAc;eACxB,MAAM;aACR,IAAI;oBACG,WAAW;kBACb,QAAQ;;;;CAIzB,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACxC,OAAO,CAAC,IAAI,GAAG;IACb,KAAK,EAAE,cAAc;IACrB,IAAI,EAAE,OAAO;IACb,QAAQ,EAAE,IAAI;IACd,YAAY,EAAE,KAAK;IACnB,cAAc,EAAE,KAAK;IACrB,MAAM,EAAE,KAAK;IACb,IAAI,EAAE,QAAQ;IACd,WAAW,EAAE,kBAAkB;CAChC,CAAA","sourcesContent":["import '../src/ox-input-file.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-file',\n  component: 'ox-input-file',\n  argTypes: {\n    name: { control: 'text' },\n    multiple: { control: 'boolean' },\n    accept: { control: 'text' },\n    icon: { control: 'text' },\n    label: { control: 'text' },\n    description: { control: 'text' },\n    hideFileList: { control: 'boolean' },\n    attachFileList: { control: 'boolean' },\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  label?: string\n  name?: string\n  multiple?: boolean\n  accept?: string\n  icon?: string\n  description?: string\n  hideFileList?: boolean\n  attachFileList?: boolean\n  disabled?: boolean\n  theme?: string\n}\n\nconst Template: Story<ArgTypes> = ({\n  label = 'select files',\n  name = 'file',\n  multiple = true,\n  accept,\n  icon,\n  description,\n  hideFileList = false,\n  attachFileList = false,\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-file\n      label=${label}\n      name=${name}\n      ?multiple=${multiple}\n      ?hide-filelist=${hideFileList}\n      ?attach-filelist=${attachFileList}\n      accept=${accept}\n      icon=${icon}\n      description=${description}\n      ?disabled=${disabled}\n    >\n    </ox-input-file>\n  </div>\n`\n\nexport const Regular = Template.bind({})\nRegular.args = {\n  label: 'select files',\n  name: 'files',\n  multiple: true,\n  hideFileList: false,\n  attachFileList: false,\n  accept: '*.*',\n  icon: 'upload',\n  description: 'drop files here!'\n}\n"]}

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

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

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

@@ -1,5 +1,6 @@
 import '../src/ox-input-hashtags.js';
 import { html } from 'lit';
+import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles';
 export default {
     title: 'ox-input-hashtags',
     component: 'ox-input-hashtags',
@@ -7,11 +8,16 @@ export default {
         placeholder: { control: 'text' },
         name: { control: 'text' },
         value: { control: 'array' },
-        disabled: { control: 'boolean' }
+        disabled: { control: 'boolean' },
+        theme: { control: 'select', options: ['light', 'dark'] }
     }
 };
-const Template = ({ placeholder = 'hashtag', name = 'hello', value = [], disabled }) => html `
-  <link href="/themes/app-theme.css" rel="stylesheet" />
+const Template = ({ placeholder = 'hashtag', name = 'hello', 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,19 +31,36 @@ const Template = ({ placeholder = 'hashtag', name = 'hello', value = [], disable
     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-hashtags
-    @change=${(e) => console.log('changed', e.target.value)}
-    name=${name}
-    placeholder=${placeholder}
-    .value=${value}
-    ?disabled=${disabled}
-  >
-  </ox-input-hashtags>
+  <script>
+    document.body.classList.add('${theme}')
+  </script>
+
+  <div class="container md-typescale-body-large-prominent">
+    <ox-input-hashtags
+      @change=${(e) => console.log('changed', e.target.value)}
+      name=${name}
+      placeholder=${placeholder}
+      .value=${value}
+      ?disabled=${disabled}
+    >
+    </ox-input-hashtags>
+  </div>
 `;
 export const Regular = Template.bind({});
 Regular.args = {

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

@@ -1 +1 @@
-{"version":3,"file":"ox-input-hashtags.stories.js","sourceRoot":"","sources":["../../stories/ox-input-hashtags.stories.ts"],"names":[],"mappings":"AAAA,OAAO,6BAA6B,CAAA;AAEpC,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAE1C,eAAe;IACb,KAAK,EAAE,mBAAmB;IAC1B,SAAS,EAAE,mBAAmB;IAC9B,QAAQ,EAAE;QACR,WAAW,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QAChC,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;AAeD,MAAM,QAAQ,GAAoB,CAAC,EAAE,WAAW,GAAG,SAAS,EAAE,IAAI,GAAG,OAAO,EAAE,KAAK,GAAG,EAAE,EAAE,QAAQ,EAAY,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;cAqBzG,CAAC,CAAQ,EAAE,EAAE,CAAC,OAAO,CAAC,GAAG,CAAC,SAAS,EAAG,CAAC,CAAC,MAA2B,CAAC,KAAK,CAAC;WAC7E,IAAI;kBACG,WAAW;aAChB,KAAK;gBACF,QAAQ;;;CAGvB,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACxC,OAAO,CAAC,IAAI,GAAG;IACb,WAAW,EAAE,SAAS;IACtB,IAAI,EAAE,SAAS;IACf,KAAK,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC;CACtB,CAAA","sourcesContent":["import '../src/ox-input-hashtags.js'\n\nimport { html, TemplateResult } from 'lit'\n\nexport default {\n  title: 'ox-input-hashtags',\n  component: 'ox-input-hashtags',\n  argTypes: {\n    placeholder: { control: 'text' },\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  placeholder?: string\n  name?: string\n  value?: string[]\n  disabled?: boolean\n}\n\nconst Template: Story<ArgTypes> = ({ placeholder = 'hashtag', name = 'hello', 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-hashtags\n    @change=${(e: Event) => console.log('changed', (e.target as HTMLInputElement).value)}\n    name=${name}\n    placeholder=${placeholder}\n    .value=${value}\n    ?disabled=${disabled}\n  >\n  </ox-input-hashtags>\n`\n\nexport const Regular = Template.bind({})\nRegular.args = {\n  placeholder: 'hashtag',\n  name: 'hashtag',\n  value: ['abc', 'def']\n}\n"]}
+{"version":3,"file":"ox-input-hashtags.stories.js","sourceRoot":"","sources":["../../stories/ox-input-hashtags.stories.ts"],"names":[],"mappings":"AAAA,OAAO,6BAA6B,CAAA;AAEpC,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAC1C,OAAO,EAAE,MAAM,IAAI,iBAAiB,EAAE,MAAM,8CAA8C,CAAA;AAE1F,eAAe;IACb,KAAK,EAAE,mBAAmB;IAC1B,SAAS,EAAE,mBAAmB;IAC9B,QAAQ,EAAE;QACR,WAAW,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QAChC,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;AAgBD,MAAM,QAAQ,GAAoB,CAAC,EACjC,WAAW,GAAG,SAAS,EACvB,IAAI,GAAG,OAAO,EACd,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,CAAC,OAAO,CAAC,GAAG,CAAC,SAAS,EAAG,CAAC,CAAC,MAA2B,CAAC,KAAK,CAAC;aAC7E,IAAI;oBACG,WAAW;eAChB,KAAK;kBACF,QAAQ;;;;CAIzB,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACxC,OAAO,CAAC,IAAI,GAAG;IACb,WAAW,EAAE,SAAS;IACtB,IAAI,EAAE,SAAS;IACf,KAAK,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC;CACtB,CAAA","sourcesContent":["import '../src/ox-input-hashtags.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-hashtags',\n  component: 'ox-input-hashtags',\n  argTypes: {\n    placeholder: { control: 'text' },\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  placeholder?: string\n  name?: string\n  value?: string[]\n  disabled?: boolean\n  theme?: string\n}\n\nconst Template: Story<ArgTypes> = ({\n  placeholder = 'hashtag',\n  name = 'hello',\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-hashtags\n      @change=${(e: Event) => console.log('changed', (e.target as HTMLInputElement).value)}\n      name=${name}\n      placeholder=${placeholder}\n      .value=${value}\n      ?disabled=${disabled}\n    >\n    </ox-input-hashtags>\n  </div>\n`\n\nexport const Regular = Template.bind({})\nRegular.args = {\n  placeholder: 'hashtag',\n  name: 'hashtag',\n  value: ['abc', 'def']\n}\n"]}

package/dist/stories/ox-input-i18n-label.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-i18n-label.stories.js

@@ -1,16 +1,22 @@
 import '../src/ox-input-i18n-label.js';
 import { html } from 'lit';
+import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles';
 export default {
     title: 'ox-input-i18n-label',
     component: 'ox-input-i18n-label',
     argTypes: {
         name: { control: 'text' },
         value: { control: 'object' },
-        disabled: { control: 'boolean' }
+        disabled: { control: 'boolean' },
+        theme: { control: 'select', options: ['light', 'dark'] }
     }
 };
-const Template = ({ name = 'values', value, disabled }) => html `
-  <link href="/themes/app-theme.css" rel="stylesheet" />
+const Template = ({ name = 'values', 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,18 +30,34 @@ const Template = ({ name = 'values', 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-i18n-label
-    @change=${(e) => {
+  <script>
+    document.body.classList.add('${theme}')
+  </script>
+
+  <div class="container md-typescale-body-large-prominent">
+    <ox-input-i18n-label
+      @change=${(e) => {
     console.log(e.target.value);
 }}
-    name=${name}
-    .value=${value}
-    .languages=${[
+      name=${name}
+      .value=${value}
+      .languages=${[
     {
         code: 'ko',
         display: '한글'
@@ -53,9 +75,10 @@ const Template = ({ name = 'values', value, disabled }) => html `
         display: 'Japanese'
     }
 ]}
-    ?disabled=${disabled}
-  >
-  </ox-input-i18n-label>
+      ?disabled=${disabled}
+    >
+    </ox-input-i18n-label>
+  </div>
 `;
 export const Regular = Template.bind({});
 Regular.args = {

package/dist/stories/ox-input-i18n-label.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"ox-input-i18n-label.stories.js","sourceRoot":"","sources":["../../stories/ox-input-i18n-label.stories.ts"],"names":[],"mappings":"AAAA,OAAO,+BAA+B,CAAA;AAEtC,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAE1C,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,QAAQ,EAAE;QAC5B,QAAQ,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;KACjC;CACF,CAAA;AAcD,MAAM,QAAQ,GAAoB,CAAC,EAAE,IAAI,GAAG,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAY,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;cAqB5E,CAAC,CAAQ,EAAE,EAAE;IACrB,OAAO,CAAC,GAAG,CAAE,CAAC,CAAC,MAA2B,CAAC,KAAK,CAAC,CAAA;AACnD,CAAC;WACM,IAAI;aACF,KAAK;iBACD;IACX;QACE,IAAI,EAAE,IAAI;QACV,OAAO,EAAE,IAAI;KACd;IACD;QACE,IAAI,EAAE,IAAI;QACV,OAAO,EAAE,SAAS;KACnB;IACD;QACE,IAAI,EAAE,IAAI;QACV,OAAO,EAAE,SAAS;KACnB;IACD;QACE,IAAI,EAAE,IAAI;QACV,OAAO,EAAE,UAAU;KACpB;CACF;gBACW,QAAQ;;;CAGvB,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACxC,OAAO,CAAC,IAAI,GAAG;IACb,IAAI,EAAE,aAAa;IACnB,KAAK,EAAE;QACL,EAAE,EAAE,OAAO;QACX,EAAE,EAAE,cAAc;QAClB,EAAE,EAAE,cAAc;QAClB,EAAE,EAAE,YAAY;KACjB;CACF,CAAA","sourcesContent":["import '../src/ox-input-i18n-label.js'\n\nimport { html, TemplateResult } from 'lit'\n\nexport default {\n  title: 'ox-input-i18n-label',\n  component: 'ox-input-i18n-label',\n  argTypes: {\n    name: { control: 'text' },\n    value: { control: 'object' },\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 = 'values', 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-i18n-label\n    @change=${(e: Event) => {\n      console.log((e.target as HTMLInputElement).value)\n    }}\n    name=${name}\n    .value=${value}\n    .languages=${[\n      {\n        code: 'ko',\n        display: '한글'\n      },\n      {\n        code: 'en',\n        display: 'English'\n      },\n      {\n        code: 'zh',\n        display: 'Chinese'\n      },\n      {\n        code: 'ja',\n        display: 'Japanese'\n      }\n    ]}\n    ?disabled=${disabled}\n  >\n  </ox-input-i18n-label>\n`\n\nexport const Regular = Template.bind({})\nRegular.args = {\n  name: 'i18n labels',\n  value: {\n    ko: '한글 코드',\n    en: 'English code',\n    zh: 'Chinese code',\n    ja: 'Japan code'\n  }\n}\n"]}
+{"version":3,"file":"ox-input-i18n-label.stories.js","sourceRoot":"","sources":["../../stories/ox-input-i18n-label.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;AAE1F,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,QAAQ,EAAE;QAC5B,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,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,GAAG,OAAO,EAAY,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;MAqBrG,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;mBACD;IACX;QACE,IAAI,EAAE,IAAI;QACV,OAAO,EAAE,IAAI;KACd;IACD;QACE,IAAI,EAAE,IAAI;QACV,OAAO,EAAE,SAAS;KACnB;IACD;QACE,IAAI,EAAE,IAAI;QACV,OAAO,EAAE,SAAS;KACnB;IACD;QACE,IAAI,EAAE,IAAI;QACV,OAAO,EAAE,UAAU;KACpB;CACF;kBACW,QAAQ;;;;CAIzB,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACxC,OAAO,CAAC,IAAI,GAAG;IACb,IAAI,EAAE,aAAa;IACnB,KAAK,EAAE;QACL,EAAE,EAAE,OAAO;QACX,EAAE,EAAE,cAAc;QAClB,EAAE,EAAE,cAAc;QAClB,EAAE,EAAE,YAAY;KACjB;CACF,CAAA","sourcesContent":["import '../src/ox-input-i18n-label.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-i18n-label',\n  component: 'ox-input-i18n-label',\n  argTypes: {\n    name: { control: 'text' },\n    value: { control: 'object' },\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 = 'values', 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-i18n-label\n      @change=${(e: Event) => {\n        console.log((e.target as HTMLInputElement).value)\n      }}\n      name=${name}\n      .value=${value}\n      .languages=${[\n        {\n          code: 'ko',\n          display: '한글'\n        },\n        {\n          code: 'en',\n          display: 'English'\n        },\n        {\n          code: 'zh',\n          display: 'Chinese'\n        },\n        {\n          code: 'ja',\n          display: 'Japanese'\n        }\n      ]}\n      ?disabled=${disabled}\n    >\n    </ox-input-i18n-label>\n  </div>\n`\n\nexport const Regular = Template.bind({})\nRegular.args = {\n  name: 'i18n labels',\n  value: {\n    ko: '한글 코드',\n    en: 'English code',\n    zh: 'Chinese code',\n    ja: 'Japan code'\n  }\n}\n"]}

package/dist/stories/ox-input-key-values.stories.d.ts

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