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

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

@@ -1,6 +1,7 @@
 import '../src/ox-input-partition-keys.js'
 
 import { html, TemplateResult } from 'lit'
+import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles'
 
 export default {
   title: 'ox-input-partition-keys',
@@ -8,7 +9,8 @@ export default {
   argTypes: {
     value: { control: 'object' },
     name: { control: 'text' },
-    disabled: { control: 'boolean' }
+    disabled: { control: 'boolean' },
+    theme: { control: 'select', options: ['light', 'dark'] }
   }
 }
 
@@ -22,10 +24,20 @@ interface ArgTypes {
   name?: string
   value?: object
   disabled?: boolean
+  theme?: string
 }
 
-const Template: Story<ArgTypes> = ({ name = 'partition-keys', value = {}, disabled }: ArgTypes) => html`
-  <link href="/themes/app-theme.css" rel="stylesheet" />
+const Template: Story<ArgTypes> = ({
+  name = 'partition-keys',
+  value = {},
+  disabled,
+  theme = 'light'
+}: ArgTypes) => 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"
@@ -39,20 +51,37 @@ const Template: Story<ArgTypes> = ({ name = 'partition-keys', value = {}, disabl
     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: Event) => {
-      console.log((e.target as HTMLInputElement).value)
-    }}
-    name=${name}
-    .value=${value}
-    ?disabled=${disabled}
-  >
-  </ox-input-partition-keys>
+  <script>
+    document.body.classList.add('${theme}')
+  </script>
+
+  <div class="container md-typescale-body-large-prominent">
+    <ox-input-partition-keys
+      @change=${(e: Event) => {
+        console.log((e.target as HTMLInputElement).value)
+      }}
+      name=${name}
+      .value=${value}
+      ?disabled=${disabled}
+    >
+    </ox-input-partition-keys>
+  </div>
 `
 
 export const Regular = Template.bind({})

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

@@ -2,6 +2,7 @@ import '../src/ox-input-privilege.js'
 import '../src/locale/locale-picker.js'
 
 import { html, TemplateResult } from 'lit'
+import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles'
 
 export default {
   title: 'ox-input-privilege',
@@ -9,7 +10,8 @@ export default {
   argTypes: {
     value: { control: 'number' },
     name: { control: 'text' },
-    disabled: { control: 'boolean' }
+    disabled: { control: 'boolean' },
+    theme: { control: 'select', options: ['light', 'dark'] }
   }
 }
 
@@ -29,10 +31,21 @@ interface ArgTypes {
     super: boolean
   } | null
   disabled?: boolean
+  theme?: string
 }
 
-const Template: Story<ArgTypes> = ({ name = 'privilege', value = null, privileges, disabled }: ArgTypes) => html`
-  <link href="/themes/app-theme.css" rel="stylesheet" />
+const Template: Story<ArgTypes> = ({
+  name = 'privilege',
+  value = null,
+  privileges,
+  disabled,
+  theme = 'light'
+}: ArgTypes) => 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"
@@ -46,29 +59,41 @@ const Template: Story<ArgTypes> = ({ name = 'privilege', value = null, privilege
     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: Event) => {
-      console.log((e.target as HTMLInputElement).value)
-    }}
-    name=${name}
-    .value=${value}
-    .privileges=${privileges}
-    ?disabled=${disabled}
-  >
-  </ox-input-privilege>
+    <ox-input-privilege
+      @change=${(e: Event) => {
+        console.log((e.target as HTMLInputElement).value)
+      }}
+      name=${name}
+      .value=${value}
+      .privileges=${privileges}
+      ?disabled=${disabled}
+    >
+    </ox-input-privilege>
+  </div>
 `
 
 export const Regular = Template.bind({})

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

@@ -1,6 +1,7 @@
 import '../src/ox-input-quantifier.js'
 
 import { html, TemplateResult } from 'lit'
+import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles'
 
 import { OxInputQuantifier } from '../src/ox-input-quantifier.js'
 
@@ -10,7 +11,8 @@ export default {
   argTypes: {
     name: { control: 'text' },
     value: { control: 'array' },
-    disabled: { control: 'boolean' }
+    disabled: { control: 'boolean' },
+    theme: { control: 'select', options: ['light', 'dark'] }
   }
 }
 
@@ -24,10 +26,15 @@ interface ArgTypes {
   name?: string
   value?: number[]
   disabled?: boolean
+  theme?: string
 }
 
-const Template: Story<ArgTypes> = ({ name = 'quantifier', value, disabled }: ArgTypes) => html`
-  <link href="/themes/app-theme.css" rel="stylesheet" />
+const Template: Story<ArgTypes> = ({ name = 'quantifier', value, disabled, theme = 'light' }: ArgTypes) => 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"
@@ -42,13 +49,34 @@ const Template: Story<ArgTypes> = ({ name = 'quantifier', value, disabled }: Arg
     rel="stylesheet"
   />
 
-  <ox-input-quantifier
-    name=${name}
-    .value=${value}
-    @change=${(e: Event) => console.log((e.target as OxInputQuantifier).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: Event) => console.log((e.target as OxInputQuantifier).value)}
+      ?disabled=${disabled}
+    >
+    </ox-input-quantifier>
+  </div>
 `
 
 export const Regular = Template.bind({})

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

@@ -1,6 +1,7 @@
 import '../src/ox-input-range.js'
 
 import { html, TemplateResult } from 'lit'
+import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles'
 
 export default {
   title: 'ox-input-range',
@@ -11,7 +12,8 @@ export default {
     step: { control: 'number' },
     min: { control: 'number' },
     max: { control: 'number' },
-    disabled: { control: 'boolean' }
+    disabled: { control: 'boolean' },
+    theme: { control: 'select', options: ['light', 'dark'] }
   }
 }
 
@@ -28,6 +30,7 @@ interface ArgTypes {
   min?: number
   max?: number
   disabled?: boolean
+  theme?: string
 }
 
 const Template: Story<ArgTypes> = ({
@@ -36,9 +39,14 @@ const Template: Story<ArgTypes> = ({
   step = 1,
   min = 0,
   max = 100,
-  disabled
+  disabled,
+  theme = 'light'
 }: ArgTypes) => html`
-  <link href="/themes/app-theme.css" rel="stylesheet" />
+  <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"
@@ -53,8 +61,29 @@ const Template: Story<ArgTypes> = ({
     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({})

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

@@ -1,6 +1,7 @@
 import '../src/ox-input-search.js'
 
 import { html, TemplateResult } from 'lit'
+import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles'
 
 export default {
   title: 'ox-input-search',
@@ -10,7 +11,8 @@ export default {
     name: { control: 'text' },
     value: { control: 'text' },
     selectAfterChange: { control: 'boolean' },
-    disabled: { control: 'boolean' }
+    disabled: { control: 'boolean' },
+    theme: { control: 'select', options: ['light', 'dark'] }
   }
 }
 
@@ -26,6 +28,7 @@ interface ArgTypes {
   value?: string
   selectAfterChange?: boolean
   disabled?: boolean
+  theme?: string
 }
 
 const Template: Story<ArgTypes> = ({
@@ -33,9 +36,14 @@ const Template: Story<ArgTypes> = ({
   name = 'hello',
   value = '',
   selectAfterChange,
-  disabled
+  disabled,
+  theme = 'light'
 }: ArgTypes) => html`
-  <link href="/themes/app-theme.css" rel="stylesheet" />
+  <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"
@@ -49,19 +57,36 @@ const Template: Story<ArgTypes> = ({
     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: Event) => console.log('changed', (e.target as HTMLInputElement).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: Event) => console.log('changed', (e.target as HTMLInputElement).value)}
+      ?select-after-change=${selectAfterChange}
+      name=${name}
+      .checked=${value}
+      ?disabled=${disabled}
+    >
+    </ox-input-search>
+  </div>
 `
 
 export const Regular = Template.bind({})

package/stories/ox-input-select-buttons.stories.ts

@@ -1,6 +1,7 @@
 import '../src/ox-input-select-buttons.js'
 
 import { html, TemplateResult } from 'lit'
+import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles'
 
 export default {
   title: 'ox-input-select-buttons',
@@ -10,7 +11,8 @@ export default {
     options: { control: 'object' },
     multiple: { control: 'boolean' },
     name: { control: 'text' },
-    disabled: { control: 'boolean' }
+    disabled: { control: 'boolean' },
+    theme: { control: 'select', options: ['light', 'dark'] }
   }
 }
 
@@ -26,6 +28,7 @@ interface ArgTypes {
   options: object
   multiple?: boolean
   disabled?: boolean
+  theme?: string
 }
 
 const Template: Story<ArgTypes> = ({
@@ -33,9 +36,14 @@ const Template: Story<ArgTypes> = ({
   value,
   multiple = false,
   options = [],
-  disabled
+  disabled,
+  theme = 'light'
 }: ArgTypes) => html`
-  <link href="/themes/app-theme.css" rel="stylesheet" />
+  <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"
@@ -49,23 +57,39 @@ const Template: Story<ArgTypes> = ({
     href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1"
     rel="stylesheet"
   />
+
   <style>
-    ox-input-select-buttons {
-      max-width: 400px;
+    ${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-select-buttons
-    @change=${(e: Event) => {
-      console.log((e.target as HTMLInputElement).value)
-    }}
-    name=${name}
-    .value=${value}
-    .options=${options}
-    ?multiple=${multiple}
-    ?disabled=${disabled}
-  >
-  </ox-input-select-buttons>
+  <script>
+    document.body.classList.add('${theme}')
+  </script>
+
+  <div class="container">
+    <ox-input-select-buttons
+      @change=${(e: Event) => {
+        console.log((e.target as HTMLInputElement).value)
+      }}
+      name=${name}
+      .value=${value}
+      .options=${options}
+      ?multiple=${multiple}
+      ?disabled=${disabled}
+    >
+    </ox-input-select-buttons>
+  </div>
 `
 
 export const Regular = Template.bind({})

package/stories/ox-input-unit.stories.ts

@@ -1,6 +1,7 @@
 import '../src/ox-input-unit-number.js'
 
 import { html, TemplateResult } from 'lit'
+import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles'
 
 export default {
   title: 'ox-input-unit-number',
@@ -41,7 +42,8 @@ export default {
         'K'
       ]
     },
-    disabled: { control: 'boolean' }
+    disabled: { control: 'boolean' },
+    theme: { control: 'select', options: ['light', 'dark'] }
   }
 }
 
@@ -58,6 +60,7 @@ interface ArgTypes {
   stdUnit: string
   userUnit: string
   disabled?: boolean
+  theme?: string
 }
 
 const Template: Story<ArgTypes> = ({
@@ -66,8 +69,15 @@ const Template: Story<ArgTypes> = ({
   value = 0,
   stdUnit = 'kg',
   userUnit,
-  disabled
+  disabled,
+  theme = 'light'
 }: ArgTypes) => 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"
     rel="stylesheet"
@@ -81,18 +91,37 @@ const Template: Story<ArgTypes> = ({
     rel="stylesheet"
   />
 
-  <link href="/themes/app-theme.css" rel="stylesheet" />
-
-  <ox-input-unit-number
-    name=${name}
-    placeholder=${placeholder}
-    .value=${value}
-    std-unit=${stdUnit}
-    user-unit=${userUnit}
-    @change=${(e: CustomEvent) => console.log(e.detail)}
-    ?disabled=${disabled}
-  >
-  </ox-input-unit-number>
+  <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-unit-number
+      name=${name}
+      placeholder=${placeholder}
+      .value=${value}
+      std-unit=${stdUnit}
+      user-unit=${userUnit}
+      @change=${(e: CustomEvent) => console.log(e.detail)}
+      ?disabled=${disabled}
+    >
+    </ox-input-unit-number>
+  </div>
 `
 
 export const Weight = Template.bind({})