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

package/src/ox-input-value-ranges.ts

@@ -31,7 +31,7 @@ export class OxInputValueRange extends OxFormField {
     :host {
       display: flex;
       flex-direction: column;
-      border: var(--border-dark-color);
+      border: 1px solid rgba(0, 0, 0, 0.15);
       padding: var(--padding-narrow) var(--padding-narrow) 0 var(--padding-narrow);
 
       --md-icon-size: var(--fontsize-default, 14px);
@@ -71,7 +71,7 @@ export class OxInputValueRange extends OxFormField {
     button:active {
       border: var(--button-activ-border);
       background-color: var(--button-background-focus-color);
-      color: var(--theme-white-color);
+      color: var(--md-sys-color-primary-container);
     }
 
     [data-from],
@@ -85,15 +85,15 @@ export class OxInputValueRange extends OxFormField {
 
     input {
       border: 0;
-      border-bottom: var(--border-dark-color);
-      padding: var(--input-padding);
+      border-bottom: 1px solid rgba(0, 0, 0, 0.15);
+      padding: var(--spacing-tiny);
       font: var(--input-font);
-      color: var(--primary-text-color);
+      color: var(--md-sys-color-on-primary-container);
     }
 
     input:focus {
       outline: none;
-      border-bottom: 1px solid var(--primary-color);
+      border-bottom: 1px solid var(--md-sys-color-on-primary-container);
     }
 
     button.hidden {
@@ -116,7 +116,7 @@ export class OxInputValueRange extends OxFormField {
     }
 
     [filler] {
-      padding: var(--input-padding);
+      padding: var(--spacing-tiny);
       flex: 1;
     }
 

package/src/ox-input-work-shift.ts

@@ -38,7 +38,7 @@ export class OxInputWorkShift extends OxFormField {
     div {
       display: flex;
       flex-flow: row nowrap;
-      gap: var(--margin-default);
+      gap: var(--spacing-medium);
     }
 
     empty-element {
@@ -52,7 +52,7 @@ export class OxInputWorkShift extends OxFormField {
       flex: 1;
     }
     [data-header] {
-      background-color: rgba(var(--primary-color-rgb), 0.05);
+      background-color: rgba(var(--md-sys-color-on-primary-container-rgb), 0.05);
       padding: var(--padding-narrow);
     }
     [data-header] span {
@@ -67,17 +67,17 @@ export class OxInputWorkShift extends OxFormField {
     input,
     select {
       border: 0;
-      border-bottom: var(--border-dark-color);
-      padding: var(--input-padding);
+      border-bottom: 1px solid rgba(0, 0, 0, 0.15);
+      padding: var(--spacing-tiny);
       font: var(--input-font);
-      color: var(--primary-text-color);
+      color: var(--md-sys-color-on-primary-container);
 
       max-height: 35px;
     }
     input:focus,
     select:focus {
       outline: none;
-      border-bottom: 1px solid var(--primary-color);
+      border-bottom: 1px solid var(--md-sys-color-on-primary-container);
     }
 
     input:required:invalid {
@@ -98,7 +98,7 @@ export class OxInputWorkShift extends OxFormField {
     button:active {
       border: var(--button-activ-border);
       background-color: var(--button-background-focus-color);
-      color: var(--theme-white-color);
+      color: var(--md-sys-color-primary-container);
     }
 
     [placeholder='value'] {

package/src/ox-select.ts

@@ -35,13 +35,13 @@ export class OxSelect extends OxFormField {
       :host {
         display: block;
         position: relative;
-        border-bottom: var(--border-dark-color);
+        border-bottom: 1px solid rgba(0, 0, 0, 0.15);
 
-        --ox-select-padding: var(--input-padding);
+        --ox-select-padding: var(--spacing-tiny);
         --ox-select-font: var(--input-font);
         --ox-select-color: var(--input-color);
         --ox-select-icon-color: var(--theme-primary-text-color, #3c3938);
-        --ox-select-icon-hover-color: var(--primary-color, #3c3938);
+        --ox-select-icon-hover-color: var(--md-sys-color-on-primary-container, #3c3938);
       }
 
       div {
@@ -75,7 +75,7 @@ export class OxSelect extends OxFormField {
       }
 
       div:hover md-icon {
-        color: var(--primary-color);
+        color: var(--md-sys-color-on-primary-container);
       }
 
       ::slotted(ox-popup-list) {

package/stories/ox-buttons-radio.stories.ts

@@ -0,0 +1,96 @@
+import '@material/web/all.js'
+import '../src/ox-buttons-radio.js'
+
+import { TemplateResult, html } from 'lit'
+import { ifDefined } from 'lit/directives/if-defined.js'
+import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles'
+
+export default {
+  title: 'ox-buttons-radio',
+  component: 'ox-buttons-radio',
+  argTypes: {
+    value: { control: 'boolean' },
+    disabled: { control: 'boolean' },
+    theme: { control: 'select', options: ['light', 'dark'] }
+  }
+}
+
+interface Story<T> {
+  (args: T): TemplateResult
+  args?: Partial<T>
+  argTypes?: Record<string, unknown>
+}
+
+interface ArgTypes {
+  value?: string
+  disabled?: boolean
+  theme?: string
+}
+
+const Template: Story<ArgTypes> = ({ 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"
+    rel="stylesheet"
+  />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+  <link
+    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>
+    .container {
+      height: 500px;
+      text-align: center;
+      padding: 20px;
+      background-color: var(--md-sys-color-primary-container);
+      color: var(--md-sys-color-on-primary-container);
+
+      padding: 20px;
+    }
+
+    ox-buttons-radio {
+      padding: 20px;
+    }
+  </style>
+
+  <script>
+    document.body.classList.add('${theme}')
+  </script>
+
+  <div class="container md-typescale-body-large-prominent">
+    <ox-buttons-radio
+      @change=${(e: CustomEvent) => {
+        console.log('changed', e.detail)
+      }}
+      value=${ifDefined(value)}
+      ?disabled=${disabled}
+    >
+      <md-filled-button data-value="1">Option 1</md-filled-button>
+      <md-filled-button data-value="2">Option 2</md-filled-button>
+      <md-outlined-button data-value="3">Option 3</md-outlined-button>
+      <md-text-button trailing-icon>Open<md-icon slot="icon">upload</md-icon></md-text-button>
+      <md-elevated-button>Elevated</md-elevated-button>
+    </ox-buttons-radio>
+  </div>
+`
+
+export const Regular = Template.bind({})
+Regular.args = {
+  value: '',
+  disabled: false,
+  theme: 'light'
+}

package/stories/ox-checkbox.stories.ts

@@ -1,6 +1,9 @@
+import '@material/web/all.js'
 import '../src/ox-checkbox.js'
 
 import { TemplateResult, html } from 'lit'
+import { ifDefined } from 'lit/directives/if-defined.js'
+import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles'
 
 export default {
   title: 'ox-checkbox',
@@ -11,7 +14,8 @@ export default {
     value: { control: 'boolean' },
     indeterminatable: { control: 'boolean' },
     indeterminate: { control: 'boolean' },
-    disabled: { control: 'boolean' }
+    disabled: { control: 'boolean' },
+    theme: { control: 'select', options: ['light', 'dark'] }
   }
 }
 
@@ -28,26 +32,68 @@ interface ArgTypes {
   indeterminatable?: boolean
   indeterminate?: boolean
   disabled?: boolean
+  theme?: string
 }
 
 const Template: Story<ArgTypes> = ({
   label = 'Checkbox',
   name = 'hello',
-  value = true,
+  value,
   indeterminatable = false,
   indeterminate = false,
-  disabled
+  disabled,
+  theme = 'light'
 }: ArgTypes) => html`
-  <ox-checkbox
-    @click=${(e: MouseEvent) => console.log('clicked')}
-    name=${name}
-    .checked=${value}
-    ?indeterminatable=${indeterminatable}
-    ?indeterminate=${indeterminate}
-    ?disabled=${disabled}
-  >
-    ${label}
-  </ox-checkbox>
+  <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"
+  />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+  <link
+    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>
+    .container {
+      height: 500px;
+      text-align: center;
+      padding: 20px;
+      background-color: var(--md-sys-color-primary-container);
+      color: var(--md-sys-color-on-primary-container);
+      padding: 20px;
+    }
+  </style>
+
+  <script>
+    document.body.classList.add('${theme}')
+  </script>
+
+  <div class="container md-typescale-body-large-prominent">
+    <ox-checkbox
+      @click=${(e: MouseEvent) => console.log('clicked')}
+      name=${name}
+      .checked=${value}
+      ?indeterminatable=${indeterminatable}
+      ?indeterminate=${indeterminate}
+      ?disabled=${disabled}
+    >
+      ${label}
+    </ox-checkbox>
+  </div>
 `
 
 export const Regular = Template.bind({})
@@ -68,6 +114,7 @@ CustomActivated.args = {
 export const CustomIndeterminated = Template.bind({})
 CustomIndeterminated.args = {
   label: 'Indeterminated',
+  indeterminatable: true,
   indeterminate: true,
-  value: true
+  theme: 'light'
 }

package/stories/ox-input-3axis.stories.ts

@@ -2,13 +2,15 @@ import '../src/ox-input-3axis.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-3axis',
   component: 'ox-input-3axis',
   argTypes: {
     value: { control: 'object' },
-    disabled: { control: 'boolean' }
+    disabled: { control: 'boolean' },
+    theme: { control: 'select', options: ['light', 'dark'] }
   }
 }
 
@@ -21,10 +23,15 @@ interface Story<T> {
 interface ArgTypes {
   value?: object
   disabled?: boolean
+  theme?: string
 }
 
-const Template: Story<ArgTypes> = ({ value = {}, disabled }: ArgTypes) => html`
-  <link href="/themes/app-theme.css" rel="stylesheet" />
+const Template: Story<ArgTypes> = ({ 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"
@@ -40,18 +47,34 @@ const Template: Story<ArgTypes> = ({ value = {}, disabled }: ArgTypes) => html`
   />
 
   <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-3axis
-    @change=${(e: Event) => {
-      console.log((e.target as HTMLInputElement).value)
-    }}
-    .value=${value}
-    ?disabled=${disabled}
-  >
-  </ox-input-3axis>
+  <script>
+    document.body.classList.add('${theme}')
+  </script>
+
+  <div class="container md-typescale-body-large-prominent">
+    <ox-input-3axis
+      @change=${(e: Event) => {
+        console.log((e.target as HTMLInputElement).value)
+      }}
+      .value=${value}
+      ?disabled=${disabled}
+    >
+    </ox-input-3axis>
+  </div>
 `
 
 export const Regular = Template.bind({})

package/stories/ox-input-3dish.stories.ts

@@ -2,6 +2,7 @@ import '../src/ox-input-3dish.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-3dish',
@@ -9,7 +10,8 @@ export default {
   argTypes: {
     value: { control: 'object' },
     name: { control: 'text' },
-    disabled: { control: 'boolean' }
+    disabled: { control: 'boolean' },
+    theme: { control: 'select', options: ['light', 'dark'] }
   }
 }
 
@@ -23,10 +25,15 @@ interface ArgTypes {
   name?: string
   value?: object
   disabled?: boolean
+  theme?: string
 }
 
-const Template: Story<ArgTypes> = ({ name = '3dish', value = [], disabled }: ArgTypes) => html`
-  <link href="/themes/app-theme.css" rel="stylesheet" />
+const Template: Story<ArgTypes> = ({ name = '3dish', 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,22 +49,38 @@ const Template: Story<ArgTypes> = ({ name = '3dish', value = [], disabled }: Arg
   />
 
   <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-3dish
-    @change=${(e: Event) => {
-      console.log((e.target as HTMLInputElement).value)
-    }}
-    name=${name}
-    .value=${value}
-    ?disabled=${disabled}
-  >
-  </ox-input-3dish>
+    <ox-input-3dish
+      @change=${(e: Event) => {
+        console.log((e.target as HTMLInputElement).value)
+      }}
+      name=${name}
+      .value=${value}
+      ?disabled=${disabled}
+    >
+    </ox-input-3dish>
+  </div>
 `
 
 export const Regular = Template.bind({})

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

@@ -2,6 +2,7 @@ import '../src/ox-input-angle.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-angle',
@@ -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'] }
   }
 }
 
@@ -23,10 +25,15 @@ interface ArgTypes {
   name?: string
   value?: number
   disabled?: boolean
+  theme?: string
 }
 
-const Template: Story<ArgTypes> = ({ name = '3dish', value = 0, disabled }: ArgTypes) => html`
-  <link href="/themes/app-theme.css" rel="stylesheet" />
+const Template: Story<ArgTypes> = ({ name = '3dish', value = 0, 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"
@@ -40,23 +47,40 @@ const Template: Story<ArgTypes> = ({ name = '3dish', value = 0, disabled }: ArgT
     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-angle
-    @change=${(e: Event) => {
-      console.log((e.target as HTMLInputElement).value)
-    }}
-    name=${name}
-    .value=${value}
-    ?disabled=${disabled}
-  >
-  </ox-input-angle>
+    <ox-input-angle
+      @change=${(e: Event) => {
+        console.log((e.target as HTMLInputElement).value)
+      }}
+      name=${name}
+      .value=${value}
+      ?disabled=${disabled}
+    >
+    </ox-input-angle>
+  </div>
 `
 
 export const Regular = Template.bind({})

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

@@ -1,6 +1,7 @@
 import '../src/ox-input-barcode.js'
 
 import { html, TemplateResult } from 'lit'
+import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles'
 
 export default {
   title: 'ox-input-barcode',
@@ -12,7 +13,8 @@ export default {
     withoutEnter: { control: 'boolean' },
     englishOnly: { control: 'boolean' },
     selectAfterChange: { control: 'boolean' },
-    disabled: { control: 'boolean' }
+    disabled: { control: 'boolean' },
+    theme: { control: 'select', options: ['light', 'dark'] }
   }
 }
 
@@ -30,6 +32,7 @@ interface ArgTypes {
   englishOnly?: boolean
   selectAfterChange?: boolean
   disabled?: boolean
+  theme?: string
 }
 
 const Template: Story<ArgTypes> = ({
@@ -38,9 +41,14 @@ const Template: Story<ArgTypes> = ({
   withoutEnter = true,
   englishOnly = false,
   selectAfterChange = false,
-  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"
@@ -54,27 +62,38 @@ 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>
-    #root {
+    ${MDTypeScaleStyles.cssText}
+  </style>
+
+  <style>
+    .container {
       height: 500px;
-    }
+      text-align: center;
+      padding: 20px;
 
-    ox-input-barcode {
-      font-size: 80px;
-      --input-font: initial;
+      background-color: var(--md-sys-color-primary-container);
+      color: var(--md-sys-color-on-primary-container);
     }
   </style>
 
-  <ox-input-barcode
-    name=${name}
-    ?without-enter=${withoutEnter}
-    ?scannable=${scannable}
-    ?english-only=${englishOnly}
-    ?select-after-change=${selectAfterChange}
-    @change=${(e: CustomEvent) => console.log((e.target as HTMLInputElement).value)}
-    ?disabled=${disabled}
-  >
-  </ox-input-barcode>
+  <script>
+    document.body.classList.add('${theme}')
+  </script>
+
+  <div class="container md-typescale-body-large-prominent">
+    <ox-input-barcode
+      name=${name}
+      ?without-enter=${withoutEnter}
+      ?scannable=${scannable}
+      ?english-only=${englishOnly}
+      ?select-after-change=${selectAfterChange}
+      @change=${(e: CustomEvent) => console.log((e.target as HTMLInputElement).value)}
+      ?disabled=${disabled}
+    >
+    </ox-input-barcode>
+  </div>
 `
 
 export const Regular = Template.bind({})