@operato/input 2.0.0-alpha.99 → 2.0.0-beta.0

package/CHANGELOG.md

@@ -3,6 +3,252 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.0.0-beta.0](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.158...v2.0.0-beta.0) (2024-06-01)
+
+**Note:** Version bump only for package @operato/input
+
+
+
+
+
+## [2.0.0-alpha.157](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.156...v2.0.0-alpha.157) (2024-06-01)
+
+**Note:** Version bump only for package @operato/input
+
+
+
+
+
+## [2.0.0-alpha.156](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.155...v2.0.0-alpha.156) (2024-06-01)
+
+
+### :bug: Bug Fix
+
+* theming styles ([3b282c2](https://github.com/hatiolab/operato/commit/3b282c21d93af03bacc5aa40027591e005f1a067))
+
+
+
+## [2.0.0-alpha.154](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.153...v2.0.0-alpha.154) (2024-06-01)
+
+**Note:** Version bump only for package @operato/input
+
+
+
+
+
+## [2.0.0-alpha.152](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.151...v2.0.0-alpha.152) (2024-05-30)
+
+
+### :bug: Bug Fix
+
+* theming style - background-color ([48a0fe4](https://github.com/hatiolab/operato/commit/48a0fe49a533ae1fbd7931a2951b6a68e9c39b01))
+
+
+
+## [2.0.0-alpha.151](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.150...v2.0.0-alpha.151) (2024-05-30)
+
+
+### :bug: Bug Fix
+
+* theming styles ([c5f59c2](https://github.com/hatiolab/operato/commit/c5f59c2e55a36eedf9056bcf2187c218556ded3e))
+
+
+
+## [2.0.0-alpha.150](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.149...v2.0.0-alpha.150) (2024-05-30)
+
+
+### :bug: Bug Fix
+
+* theming styles ([4f2c9bb](https://github.com/hatiolab/operato/commit/4f2c9bbc1ad4f27d99a18e99c10604b3db480899))
+
+
+
+## [2.0.0-alpha.149](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.148...v2.0.0-alpha.149) (2024-05-30)
+
+
+### :bug: Bug Fix
+
+* styles ([9ec269b](https://github.com/hatiolab/operato/commit/9ec269b18bc82a931083137214fb6e3017201107))
+
+
+
+## [2.0.0-alpha.148](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.147...v2.0.0-alpha.148) (2024-05-30)
+
+
+### :rocket: New Features
+
+* md3 ([2d85145](https://github.com/hatiolab/operato/commit/2d8514510e4dd88d3ff0652e0b22c9992cabce5c))
+* md3 ([55b7496](https://github.com/hatiolab/operato/commit/55b7496ea46a6b65ac6ab71bc1be7c89d1ba91e5))
+
+
+### :sparkles: Styling
+
+* input ([b44bf8d](https://github.com/hatiolab/operato/commit/b44bf8d0a100fc59ecf79f0a832a445f90d2f4ee))
+* list, grid, card ([773b57c](https://github.com/hatiolab/operato/commit/773b57c8f85536ddfc2bd883f0209341c0ff2a0b))
+* popup ([f881e3b](https://github.com/hatiolab/operato/commit/f881e3b1b70acd957a4ba5565bc0b90f0ef18d00))
+* themes update, ox-buttons-radio, ox-checkbo ([0da66c4](https://github.com/hatiolab/operato/commit/0da66c47f053ee6675a247d6968ceaf818f06ad3))
+
+
+### :bug: Bug Fix
+
+* color theme ([8498761](https://github.com/hatiolab/operato/commit/8498761842ba6c53b98f14ec1ba061d090a997c8))
+* dark theme for event-view ([0480a3d](https://github.com/hatiolab/operato/commit/0480a3d970a488e9f0cd93a1af66b4516c44b4bb))
+* input button style on dark theme ([b8d1a3f](https://github.com/hatiolab/operato/commit/b8d1a3f68c490fd9d1f38b3bbaba40292dd6b88c))
+* missing code from ox-select stories ([bd229bb](https://github.com/hatiolab/operato/commit/bd229bb4fdb1d0b6db61977fb2452bdfe8c98950))
+* ox-buttons-radio ([339e0bc](https://github.com/hatiolab/operato/commit/339e0bcfee9288e1144189ed2f0ac27935c7a6d8))
+* ox-input-select-buttons story ([8efa3c6](https://github.com/hatiolab/operato/commit/8efa3c6e7428eef23cfe10757c155b62a9d59ab4))
+* revoke ox-input-barcode ([db50995](https://github.com/hatiolab/operato/commit/db50995c0685f0ca81e5d26025ebe502f83ec077))
+
+
+
+## [2.0.0-alpha.146](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.145...v2.0.0-alpha.146) (2024-05-29)
+
+
+### :rocket: New Features
+
+* ox-select.setOptions(..) method ([e026449](https://github.com/hatiolab/operato/commit/e0264494780fed696b95f16431f774c7a49e4cde))
+
+
+
+## [2.0.0-alpha.145](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.144...v2.0.0-alpha.145) (2024-05-28)
+
+**Note:** Version bump only for package @operato/input
+
+
+
+
+
+## [2.0.0-alpha.142](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.141...v2.0.0-alpha.142) (2024-05-21)
+
+**Note:** Version bump only for package @operato/input
+
+
+
+
+
+## [2.0.0-alpha.134](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.133...v2.0.0-alpha.134) (2024-05-13)
+
+**Note:** Version bump only for package @operato/input
+
+
+
+
+
+## [2.0.0-alpha.133](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.132...v2.0.0-alpha.133) (2024-05-12)
+
+
+### :rocket: New Features
+
+* add personalization for ox-filter-form-base ([c60874c](https://github.com/hatiolab/operato/commit/c60874c9f3f6ca2ef68f81d62cd3781fd62074fe))
+
+
+
+## [2.0.0-alpha.129](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.128...v2.0.0-alpha.129) (2024-05-08)
+
+**Note:** Version bump only for package @operato/input
+
+
+
+
+
+## [2.0.0-alpha.124](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.123...v2.0.0-alpha.124) (2024-05-08)
+
+**Note:** Version bump only for package @operato/input
+
+
+
+
+
+## [2.0.0-alpha.123](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.122...v2.0.0-alpha.123) (2024-05-07)
+
+
+### :rocket: New Features
+
+* ox-zoomable-image ([dbeb528](https://github.com/hatiolab/operato/commit/dbeb528ca4d2afcef0ac6b365bb3c02b286211f9))
+
+
+
+## [2.0.0-alpha.122](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.121...v2.0.0-alpha.122) (2024-05-06)
+
+
+### :bug: Bug Fix
+
+* ox-input-select-button ([1e1be72](https://github.com/hatiolab/operato/commit/1e1be72dcb5d5d23e2d0df0701b0da04855e73d2))
+
+
+
+## [2.0.0-alpha.120](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.119...v2.0.0-alpha.120) (2024-05-05)
+
+**Note:** Version bump only for package @operato/input
+
+
+
+
+
+## [2.0.0-alpha.118](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.117...v2.0.0-alpha.118) (2024-05-04)
+
+**Note:** Version bump only for package @operato/input
+
+
+
+
+
+## [2.0.0-alpha.116](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.115...v2.0.0-alpha.116) (2024-05-04)
+
+**Note:** Version bump only for package @operato/input
+
+
+
+
+
+## [2.0.0-alpha.114](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.113...v2.0.0-alpha.114) (2024-05-04)
+
+**Note:** Version bump only for package @operato/input
+
+
+
+
+
+## [2.0.0-alpha.111](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.110...v2.0.0-alpha.111) (2024-05-02)
+
+**Note:** Version bump only for package @operato/input
+
+
+
+
+
+## [2.0.0-alpha.110](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.109...v2.0.0-alpha.110) (2024-05-02)
+
+**Note:** Version bump only for package @operato/input
+
+
+
+
+
+## [2.0.0-alpha.107](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.106...v2.0.0-alpha.107) (2024-05-01)
+
+**Note:** Version bump only for package @operato/input
+
+
+
+
+
+## [2.0.0-alpha.102](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.101...v2.0.0-alpha.102) (2024-04-22)
+
+**Note:** Version bump only for package @operato/input
+
+
+
+
+
+## [2.0.0-alpha.100](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.99...v2.0.0-alpha.100) (2024-04-21)
+
+**Note:** Version bump only for package @operato/input
+
+
+
+
+
 ## [2.0.0-alpha.99](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.98...v2.0.0-alpha.99) (2024-04-21)
 
 **Note:** Version bump only for package @operato/input

package/demo/index-barcode.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en-GB">
   <head>
     <meta charset="utf-8" />
@@ -13,13 +13,13 @@
         --ox-checkbox-border: 1px solid rgba(0, 0, 0, 0.3);
         --ox-checkbox-border-radius: var(--border-radius, 4px);
         --ox-checkbox-size: 15px;
-        --ox-checkbox-background-color: var(--theme-white-color, #fff);
-        --ox-checkbox-label-color: var(--primary-text-color, #3a5877);
+        --ox-checkbox-background-color: var(--md-sys-color-surface, #fff);
+        --ox-checkbox-label-color: var(--md-sys-color-on-primary-container, #3a5877);
         --ox-checkbox-label-margin: 0 0 0 7px;
 
         /* checkbox checked */
         --ox-checkbox-checked-background-color: var(--ox-checkbox-background-color);
-        --ox-checkbox-checked-color: var(--primary-color, #38a25b);
+        --ox-checkbox-checked-color: var(--md-sys-color-on-primary-container, #38a25b);
         --ox-checkbox-checked-border: 1px solid var(--ox-checkbox-checked-color);
         --ox-checkbox-checked-font-weight: bold;
 

package/demo/index-checkbox.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en-GB">
   <head>
     <meta charset="utf-8" />
@@ -13,13 +13,13 @@
         --ox-checkbox-border: 1px solid rgba(0, 0, 0, 0.3);
         --ox-checkbox-border-radius: var(--border-radius, 4px);
         --ox-checkbox-size: 15px;
-        --ox-checkbox-background-color: var(--theme-white-color, #fff);
-        --ox-checkbox-label-color: var(--primary-text-color, #3a5877);
+        --ox-checkbox-background-color: var(--md-sys-color-surface, #fff);
+        --ox-checkbox-label-color: var(--md-sys-color-on-primary-container, #3a5877);
         --ox-checkbox-label-margin: 0 0 0 7px;
 
         /* checkbox checked */
         --ox-checkbox-checked-background-color: var(--ox-checkbox-background-color);
-        --ox-checkbox-checked-color: var(--primary-color, #38a25b);
+        --ox-checkbox-checked-color: var(--md-sys-color-on-primary-container, #38a25b);
         --ox-checkbox-checked-border: 1px solid var(--ox-checkbox-checked-color);
         --ox-checkbox-checked-font-weight: bold;
 

package/demo/index-code.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en-GB">
   <head>
     <meta charset="utf-8" />
@@ -13,13 +13,13 @@
         --ox-checkbox-border: 1px solid rgba(0, 0, 0, 0.3);
         --ox-checkbox-border-radius: var(--border-radius, 4px);
         --ox-checkbox-size: 15px;
-        --ox-checkbox-background-color: var(--theme-white-color, #fff);
-        --ox-checkbox-label-color: var(--primary-text-color, #3a5877);
+        --ox-checkbox-background-color: var(--md-sys-color-surface, #fff);
+        --ox-checkbox-label-color: var(--md-sys-color-on-primary-container, #3a5877);
         --ox-checkbox-label-margin: 0 0 0 7px;
 
         /* checkbox checked */
         --ox-checkbox-checked-background-color: var(--ox-checkbox-background-color);
-        --ox-checkbox-checked-color: var(--primary-color, #38a25b);
+        --ox-checkbox-checked-color: var(--md-sys-color-on-primary-container, #38a25b);
         --ox-checkbox-checked-border: 1px solid var(--ox-checkbox-checked-color);
         --ox-checkbox-checked-font-weight: bold;
 

package/demo/index-options.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en-GB">
   <head>
     <meta charset="utf-8" />
@@ -34,7 +34,7 @@
               console.log('form value', new FormData(form).get('options'))
             }}
           ></ox-input-options>
-          <input type="button" value="Sort" @click=${e => sort()}></input>
+          <input type="button" value="Sort" @click=${e => sort()} />
         `,
         form
       )

package/dist/src/ox-buttons-radio.d.ts

@@ -8,13 +8,17 @@ import { OxFormField } from './ox-form-field';
 
 Example:
 
-  <ox-buttons-radio @change=${e => this._onChange(e)} value=${value}>
-    <div value="top"></div>
-    <div value="middle"></div>
-    <div value="bottom"></div>
+  <ox-buttons-radio
+    class="light"
+    @change=${(e: CustomEvent) => console.log(e.detail)}
+    value="1"
+  >
+    <md-outlined-button data-value="1" ?active=${value == '1'}>Option 1</md-outlined-button>
+    <md-outlined-button data-value="2" ?active=${value == '2'}>Option 2</md-outlined-button>
+    <md-outlined-button data-value="3" ?active=${value == '3'}>Option 3</md-outlined-button>
   </ox-buttons-radio>
 */
-export declare class PropertyButtonsRadio extends OxFormField {
+export declare class OxButtonsRadio extends OxFormField {
     static styles: import("lit").CSSResult[];
     /**
      * `value`는 버튼의 눌린 상태를 값으로 갖는 속성이다.

package/dist/src/ox-buttons-radio.js

@@ -10,13 +10,17 @@ import { OxFormField } from './ox-form-field';
 
 Example:
 
-  <ox-buttons-radio @change=${e => this._onChange(e)} value=${value}>
-    <div value="top"></div>
-    <div value="middle"></div>
-    <div value="bottom"></div>
+  <ox-buttons-radio
+    class="light"
+    @change=${(e: CustomEvent) => console.log(e.detail)}
+    value="1"
+  >
+    <md-outlined-button data-value="1" ?active=${value == '1'}>Option 1</md-outlined-button>
+    <md-outlined-button data-value="2" ?active=${value == '2'}>Option 2</md-outlined-button>
+    <md-outlined-button data-value="3" ?active=${value == '3'}>Option 3</md-outlined-button>
   </ox-buttons-radio>
 */
-let PropertyButtonsRadio = class PropertyButtonsRadio extends OxFormField {
+let OxButtonsRadio = class OxButtonsRadio extends OxFormField {
     constructor() {
         super(...arguments);
         /**
@@ -31,6 +35,34 @@ let PropertyButtonsRadio = class PropertyButtonsRadio extends OxFormField {
         css `
       :host {
         display: inline-block;
+        background-color: var(--ox-buttons-radio-background-color, var(--md-sys-color-surface));
+
+        --md-outlined-button-label-text-color: var(--md-sys-color-on-surface-variant);
+        --md-outlined-button-label-text-size: var(--md-sys-typescale-label-large-size, 0.875rem);
+        --md-outlined-button-container-height: var(--form-element-height-medium);
+        --md-outlined-button-container-shape: var(--md-sys-shape-corner-small);
+        --md-outlined-button-leading-space: var(--spacing-large);
+        --md-outlined-button-trailing-space: var(--spacing-large);
+        --md-outlined-button-hover-label-text-color: var(--md-sys-color-primary);
+        --md-outlined-button-pressed-outline-color: var(--md-sys-color-primary);
+        --md-outlined-button-pressed-label-text-color: var(--md-sys-color-primary);
+
+        --md-filled-button-container-color: var(--md-sys-color-primary);
+        --md-filled-button-label-text-color: var(--md-sys-color-primary-container);
+        --md-filled-button-label-text-size: var(--md-sys-typescale-label-large-size, 0.875rem);
+        --md-filled-button-container-height: var(--form-element-height-medium);
+        --md-filled-button-container-shape: var(--md-sys-shape-corner-small);
+        --md-filled-button-leading-space: var(--spacing-large);
+        --md-filled-button-trailing-space: var(--spacing-large);
+        --md-filled-button-hover-label-text-color: var(--md-sys-color-secondary-container);
+        --md-filled-button-pressed-label-text-color: var(--md-sys-color-secondary-container);
+        --md-filled-button-focus-label-text-color: var(--md-sys-color-secondary-container);
+
+        --md-text-button-container-height: var(--form-element-height-medium);
+        --md-text-button-container-shape: var(--md-sys-shape-corner-small);
+
+        --md-elevated-button-container-height: var(--form-element-height-medium);
+        --md-elevated-button-container-shape: var(--md-sys-shape-corner-small);
       }
     `
     ]; }
@@ -93,15 +125,15 @@ let PropertyButtonsRadio = class PropertyButtonsRadio extends OxFormField {
 };
 __decorate([
     property({ type: Object })
-], PropertyButtonsRadio.prototype, "value", void 0);
+], OxButtonsRadio.prototype, "value", void 0);
 __decorate([
     property({ type: Boolean })
-], PropertyButtonsRadio.prototype, "mandatory", void 0);
+], OxButtonsRadio.prototype, "mandatory", void 0);
 __decorate([
     state()
-], PropertyButtonsRadio.prototype, "_slotObserver", void 0);
-PropertyButtonsRadio = __decorate([
+], OxButtonsRadio.prototype, "_slotObserver", void 0);
+OxButtonsRadio = __decorate([
     customElement('ox-buttons-radio')
-], PropertyButtonsRadio);
-export { PropertyButtonsRadio };
+], OxButtonsRadio);
+export { OxButtonsRadio };
 //# sourceMappingURL=ox-buttons-radio.js.map

package/dist/src/ox-buttons-radio.js.map

@@ -1 +1 @@
-{"version":3,"file":"ox-buttons-radio.js","sourceRoot":"","sources":["../../src/ox-buttons-radio.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport { css, html, PropertyValues } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nimport { OxFormField } from './ox-form-field'\n\n/**\n여러 버튼 중에서 하나만 눌리거나, 모두 눌리지 않은 상태만을 갖는 라디오 형태의 버튼이다.\n\nExample:\n\n  <ox-buttons-radio @change=${e => this._onChange(e)} value=${value}>\n    <div value=\"top\"></div>\n    <div value=\"middle\"></div>\n    <div value=\"bottom\"></div>\n  </ox-buttons-radio>\n*/\n@customElement('ox-buttons-radio')\nexport class PropertyButtonsRadio extends OxFormField {\n  static styles = [\n    css`\n      :host {\n        display: inline-block;\n      }\n    `\n  ]\n\n  /**\n   * `value`는 버튼의 눌린 상태를 값으로 갖는 속성이다.\n   */\n  @property({ type: Object }) value: Object | null = null\n  @property({ type: Boolean }) mandatory!: boolean\n\n  @state() _slotObserver: MutationObserver = new MutationObserver(mutations => {\n    this._onChanged()\n  })\n\n  render() {\n    return html` <slot @click=${(e: Event) => this._onTapButton(e)}></slot> `\n  }\n\n  connectedCallback() {\n    super.connectedCallback()\n\n    this._slotObserver?.observe(this, { childList: true })\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback()\n\n    this._slotObserver?.disconnect()\n  }\n\n  updated(changes: PropertyValues<this>) {\n    changes.has('value') && this._onChanged()\n  }\n\n  get buttons() {\n    return Array.from(this.querySelectorAll('*'))\n  }\n\n  _onChanged() {\n    this.buttons.forEach(button => {\n      if (this.value === button.getAttribute('data-value')) {\n        button.setAttribute('active', '')\n      } else {\n        button.removeAttribute('active')\n      }\n    })\n  }\n\n  _onTapButton(e: Event) {\n    var target = e.target as HTMLElement\n    target = target.closest('[data-value]') as HTMLElement\n\n    if (!target || target === this) {\n      return\n    }\n\n    var old = this.value\n\n    if (!this.mandatory) {\n      if (!target.getAttribute('active')) {\n        this.value = target.getAttribute('data-value')\n        target.setAttribute('active', '')\n      } else {\n        this.value = null\n        target.removeAttribute('active')\n      }\n    } else {\n      this.value = target.getAttribute('data-value')\n      target.setAttribute('active', '')\n    }\n\n    if (old !== this.value) {\n      this.dispatchEvent(\n        new CustomEvent('change', {\n          bubbles: true,\n          composed: true,\n          detail: this.value\n        })\n      )\n    }\n  }\n}\n"]}
+{"version":3,"file":"ox-buttons-radio.js","sourceRoot":"","sources":["../../src/ox-buttons-radio.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport { css, html, PropertyValues } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nimport { OxFormField } from './ox-form-field'\n\n/**\n여러 버튼 중에서 하나만 눌리거나, 모두 눌리지 않은 상태만을 갖는 라디오 형태의 버튼이다.\n\nExample:\n\n  <ox-buttons-radio\n    class=\"light\"\n    @change=${(e: CustomEvent) => console.log(e.detail)}\n    value=\"1\"\n  >\n    <md-outlined-button data-value=\"1\" ?active=${value == '1'}>Option 1</md-outlined-button>\n    <md-outlined-button data-value=\"2\" ?active=${value == '2'}>Option 2</md-outlined-button>\n    <md-outlined-button data-value=\"3\" ?active=${value == '3'}>Option 3</md-outlined-button>\n  </ox-buttons-radio>\n*/\n@customElement('ox-buttons-radio')\nexport class OxButtonsRadio extends OxFormField {\n  static styles = [\n    css`\n      :host {\n        display: inline-block;\n        background-color: var(--ox-buttons-radio-background-color, var(--md-sys-color-surface));\n\n        --md-outlined-button-label-text-color: var(--md-sys-color-on-surface-variant);\n        --md-outlined-button-label-text-size: var(--md-sys-typescale-label-large-size, 0.875rem);\n        --md-outlined-button-container-height: var(--form-element-height-medium);\n        --md-outlined-button-container-shape: var(--md-sys-shape-corner-small);\n        --md-outlined-button-leading-space: var(--spacing-large);\n        --md-outlined-button-trailing-space: var(--spacing-large);\n        --md-outlined-button-hover-label-text-color: var(--md-sys-color-primary);\n        --md-outlined-button-pressed-outline-color: var(--md-sys-color-primary);\n        --md-outlined-button-pressed-label-text-color: var(--md-sys-color-primary);\n\n        --md-filled-button-container-color: var(--md-sys-color-primary);\n        --md-filled-button-label-text-color: var(--md-sys-color-primary-container);\n        --md-filled-button-label-text-size: var(--md-sys-typescale-label-large-size, 0.875rem);\n        --md-filled-button-container-height: var(--form-element-height-medium);\n        --md-filled-button-container-shape: var(--md-sys-shape-corner-small);\n        --md-filled-button-leading-space: var(--spacing-large);\n        --md-filled-button-trailing-space: var(--spacing-large);\n        --md-filled-button-hover-label-text-color: var(--md-sys-color-secondary-container);\n        --md-filled-button-pressed-label-text-color: var(--md-sys-color-secondary-container);\n        --md-filled-button-focus-label-text-color: var(--md-sys-color-secondary-container);\n\n        --md-text-button-container-height: var(--form-element-height-medium);\n        --md-text-button-container-shape: var(--md-sys-shape-corner-small);\n\n        --md-elevated-button-container-height: var(--form-element-height-medium);\n        --md-elevated-button-container-shape: var(--md-sys-shape-corner-small);\n      }\n    `\n  ]\n\n  /**\n   * `value`는 버튼의 눌린 상태를 값으로 갖는 속성이다.\n   */\n  @property({ type: Object }) value: Object | null = null\n  @property({ type: Boolean }) mandatory!: boolean\n\n  @state() _slotObserver: MutationObserver = new MutationObserver(mutations => {\n    this._onChanged()\n  })\n\n  render() {\n    return html` <slot @click=${(e: Event) => this._onTapButton(e)}></slot> `\n  }\n\n  connectedCallback() {\n    super.connectedCallback()\n\n    this._slotObserver?.observe(this, { childList: true })\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback()\n\n    this._slotObserver?.disconnect()\n  }\n\n  updated(changes: PropertyValues<this>) {\n    changes.has('value') && this._onChanged()\n  }\n\n  get buttons() {\n    return Array.from(this.querySelectorAll('*'))\n  }\n\n  _onChanged() {\n    this.buttons.forEach(button => {\n      if (this.value === button.getAttribute('data-value')) {\n        button.setAttribute('active', '')\n      } else {\n        button.removeAttribute('active')\n      }\n    })\n  }\n\n  _onTapButton(e: Event) {\n    var target = e.target as HTMLElement\n    target = target.closest('[data-value]') as HTMLElement\n\n    if (!target || target === this) {\n      return\n    }\n\n    var old = this.value\n\n    if (!this.mandatory) {\n      if (!target.getAttribute('active')) {\n        this.value = target.getAttribute('data-value')\n        target.setAttribute('active', '')\n      } else {\n        this.value = null\n        target.removeAttribute('active')\n      }\n    } else {\n      this.value = target.getAttribute('data-value')\n      target.setAttribute('active', '')\n    }\n\n    if (old !== this.value) {\n      this.dispatchEvent(\n        new CustomEvent('change', {\n          bubbles: true,\n          composed: true,\n          detail: this.value\n        })\n      )\n    }\n  }\n}\n"]}

package/dist/src/ox-checkbox.js

@@ -32,33 +32,36 @@ let OxCheckbox = class OxCheckbox extends OxFormField {
         cursor: auto;
       }
 
-      [checkbox] {
+      .checkbox {
         display: flex;
         border-radius: var(--ox-checkbox-border-radius, 4px);
-        border: var(--ox-checkbox-border, 1px solid rgba(0, 0, 0, 0.3));
-        background-color: var(--ox-checkbox-background-color, #fff);
+        background-color: var(--ox-checkbox-unchecked-background-color, var(--md-sys-color-surface-container-lowest));
+        border: var(--ox-checkbox-unchecked-border, 1px solid var(--md-sys-color-outline));
         width: var(--ox-checkbox-size, 15px);
         height: var(--ox-checkbox-size, 15px);
         align-items: center;
         justify-content: center;
       }
 
-      a {
-        background-color: var(--ox-checkbox-unchecked-background-color, #fff);
-        border: var(--ox-checkbox-unchecked-border, 1px solid rgba(0, 0, 0, 0.3));
+      :host([indeterminate]) .checkbox {
+        background-color: var(--ox-checkbox-unchecked-background-color, var(--md-ref-palette-primary80));
       }
 
-      :host([checked]) a {
-        background-color: var(--ox-checkbox-checked-background-color, #fff);
-        border: var(--ox-checkbox-checked-border, 1px solid #38a25b);
+      :host([checked]) .checkbox {
+        background-color: var(--ox-checkbox-checked-background-color, var(--md-ref-palette-primary60));
       }
 
       path {
-        fill: var(--ox-checkbox-fill-color, rgba(0, 0, 0, 0.1));
+        fill: var(--ox-checkbox-unchecked-color, var(--md-sys-color-surface-container-lowest));
+      }
+
+      :host([indeterminate]) line {
+        fill: var(--ox-checkbox-intermidiate-color, var(--md-sys-color-on-surface-variant));
+        stroke: var(--ox-checkbox-intermidiate-color, var(--md-sys-color-outline));
       }
 
       :host([checked]) path {
-        fill: var(--ox-checkbox-checked-color, #38a25b);
+        fill: var(--ox-checkbox-checked-color, var(--md-sys-color-on-primary));
       }
 
       svg {
@@ -66,12 +69,13 @@ let OxCheckbox = class OxCheckbox extends OxFormField {
         height: var(--ox-checkbox-size, 15px);
       }
 
-      [label] {
-        color: var(--ox-checkbox-label-color, #3a5877);
+      .label {
+        color: var(--ox-checkbox-label-color, var(--md-sys-color-on-surface-variant));
+        font-size: var(--md-sys-typescale-label-large-size, 0.875rem);
+        line-height: var(--md-sys-typescale-label-medium-line-height, 1rem);
       }
-
-      :host([checked]) [label] {
-        font-weight: var(--ox-checkbox-checked-font-weight, bold);
+      :host([checked]) .label {
+        font-weight: 700;
       }
     `
     ]; }
@@ -83,11 +87,11 @@ let OxCheckbox = class OxCheckbox extends OxFormField {
               <slot></slot>
             </span>`
             : ''}
-        <a href="#" @click=${(e) => e.preventDefault()} checkbox>
+        <a href="#" @click=${(e) => e.preventDefault()} class="checkbox">
           ${this.indeterminate ? this.indeterminateIcon : this.checked ? this.checkedIcon : this.uncheckedIcon}
         </a>
         ${this._hasInner && !this.left
-            ? html ` <span label>
+            ? html ` <span class="label">
               <slot></slot>
             </span>`
             : ''}
@@ -144,7 +148,7 @@ let OxCheckbox = class OxCheckbox extends OxFormField {
     get indeterminateIcon() {
         return html `
       <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-        <line x1="4" x2="20" y1="12" y2="12" stroke="rgba(0, 0, 0, 0.7)" stroke-width="2" stroke-linecap="round" />
+        <line x1="4" x2="20" y1="12" y2="12" stroke-width="2" stroke-linecap="round" />
       </svg>
     `;
     }

package/dist/src/ox-checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"ox-checkbox.js","sourceRoot":"","sources":["../../src/ox-checkbox.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\n/*\n  This component is inspired by https://github.com/Polydile/dile-components, thanks Dile.\n*/\n\nimport { css, html } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nimport { OxFormField } from './ox-form-field'\n\n@customElement('ox-checkbox')\nexport class OxCheckbox extends OxFormField {\n  static styles = [\n    css`\n      div {\n        display: flex;\n        gap: var(--input-intra-gap, 7px);\n\n        align-items: center;\n        cursor: pointer;\n      }\n\n      [disabled] {\n        opacity: var(--ox-checkbox-disabled-opacity, 0.5);\n        cursor: auto;\n      }\n\n      [checkbox] {\n        display: flex;\n        border-radius: var(--ox-checkbox-border-radius, 4px);\n        border: var(--ox-checkbox-border, 1px solid rgba(0, 0, 0, 0.3));\n        background-color: var(--ox-checkbox-background-color, #fff);\n        width: var(--ox-checkbox-size, 15px);\n        height: var(--ox-checkbox-size, 15px);\n        align-items: center;\n        justify-content: center;\n      }\n\n      a {\n        background-color: var(--ox-checkbox-unchecked-background-color, #fff);\n        border: var(--ox-checkbox-unchecked-border, 1px solid rgba(0, 0, 0, 0.3));\n      }\n\n      :host([checked]) a {\n        background-color: var(--ox-checkbox-checked-background-color, #fff);\n        border: var(--ox-checkbox-checked-border, 1px solid #38a25b);\n      }\n\n      path {\n        fill: var(--ox-checkbox-fill-color, rgba(0, 0, 0, 0.1));\n      }\n\n      :host([checked]) path {\n        fill: var(--ox-checkbox-checked-color, #38a25b);\n      }\n\n      svg {\n        width: var(--ox-checkbox-size, 15px);\n        height: var(--ox-checkbox-size, 15px);\n      }\n\n      [label] {\n        color: var(--ox-checkbox-label-color, #3a5877);\n      }\n\n      :host([checked]) [label] {\n        font-weight: var(--ox-checkbox-checked-font-weight, bold);\n      }\n    `\n  ]\n\n  @property({ type: Boolean, attribute: 'checked', reflect: true }) checked: boolean | undefined = false\n  @property({ type: Boolean, attribute: 'indeterminatable' }) indeterminatable: boolean = false\n  @property({ type: Boolean, attribute: 'indeterminate', reflect: true }) indeterminate: boolean = false\n  @property({ type: Boolean, attribute: 'left-label' }) left: boolean = false\n\n  @state() _hasInner: boolean = !!this.innerHTML.trim().length\n\n  render() {\n    return html`\n      <div @click=${this.onClick} ?disabled=${this.disabled}>\n        ${this._hasInner && this.left\n          ? html` <span label>\n              <slot></slot>\n            </span>`\n          : ''}\n        <a href=\"#\" @click=${(e: Event) => e.preventDefault()} checkbox>\n          ${this.indeterminate ? this.indeterminateIcon : this.checked ? this.checkedIcon : this.uncheckedIcon}\n        </a>\n        ${this._hasInner && !this.left\n          ? html` <span label>\n              <slot></slot>\n            </span>`\n          : ''}\n      </div>\n    `\n  }\n\n  connectedCallback() {\n    super.connectedCallback()\n\n    this.setAttribute('tabindex', '0')\n    this.addEventListener('keydown', this.onKeyDown.bind(this))\n  }\n\n  onClick() {\n    if (this.disabled) {\n      return\n    }\n\n    if (!this.indeterminatable) {\n      this.indeterminate = false\n      this.checked = !this.checked\n    } else {\n      if (this.indeterminate) {\n        this.indeterminate = false\n        this.checked = true\n      } else if (this.checked) {\n        this.indeterminate = false\n        this.checked = false\n      } else {\n        this.indeterminate = true\n        this.checked = undefined\n      }\n    }\n\n    this.dispatchEvent(\n      new CustomEvent('change', {\n        bubbles: true,\n        composed: true,\n        detail: this.checked\n      })\n    )\n  }\n\n  get checkedIcon() {\n    return html`\n      <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n        <path d=\"M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z\" />\n      </svg>\n    `\n  }\n\n  get uncheckedIcon() {\n    return html`\n      <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n        <path d=\"M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z\" />\n      </svg>\n    `\n  }\n\n  get indeterminateIcon() {\n    return html`\n      <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n        <line x1=\"4\" x2=\"20\" y1=\"12\" y2=\"12\" stroke=\"rgba(0, 0, 0, 0.7)\" stroke-width=\"2\" stroke-linecap=\"round\" />\n      </svg>\n    `\n  }\n\n  onKeyDown(e: KeyboardEvent) {\n    e.preventDefault()\n\n    if (e.key === ' ' || e.key == 'Spacebar') {\n      this.onClick()\n    }\n  }\n\n  protected appendFormData({ formData }: FormDataEvent): void {\n    this.name && !this.indeterminate && formData.append(this.name, this.checked ? 'true' : 'false')\n  }\n}\n"]}
+{"version":3,"file":"ox-checkbox.js","sourceRoot":"","sources":["../../src/ox-checkbox.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\n/*\n  This component is inspired by https://github.com/Polydile/dile-components, thanks Dile.\n*/\n\nimport { css, html } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nimport { OxFormField } from './ox-form-field'\n\n@customElement('ox-checkbox')\nexport class OxCheckbox extends OxFormField {\n  static styles = [\n    css`\n      div {\n        display: flex;\n        gap: var(--input-intra-gap, 7px);\n\n        align-items: center;\n        cursor: pointer;\n      }\n\n      [disabled] {\n        opacity: var(--ox-checkbox-disabled-opacity, 0.5);\n        cursor: auto;\n      }\n\n      .checkbox {\n        display: flex;\n        border-radius: var(--ox-checkbox-border-radius, 4px);\n        background-color: var(--ox-checkbox-unchecked-background-color, var(--md-sys-color-surface-container-lowest));\n        border: var(--ox-checkbox-unchecked-border, 1px solid var(--md-sys-color-outline));\n        width: var(--ox-checkbox-size, 15px);\n        height: var(--ox-checkbox-size, 15px);\n        align-items: center;\n        justify-content: center;\n      }\n\n      :host([indeterminate]) .checkbox {\n        background-color: var(--ox-checkbox-unchecked-background-color, var(--md-ref-palette-primary80));\n      }\n\n      :host([checked]) .checkbox {\n        background-color: var(--ox-checkbox-checked-background-color, var(--md-ref-palette-primary60));\n      }\n\n      path {\n        fill: var(--ox-checkbox-unchecked-color, var(--md-sys-color-surface-container-lowest));\n      }\n\n      :host([indeterminate]) line {\n        fill: var(--ox-checkbox-intermidiate-color, var(--md-sys-color-on-surface-variant));\n        stroke: var(--ox-checkbox-intermidiate-color, var(--md-sys-color-outline));\n      }\n\n      :host([checked]) path {\n        fill: var(--ox-checkbox-checked-color, var(--md-sys-color-on-primary));\n      }\n\n      svg {\n        width: var(--ox-checkbox-size, 15px);\n        height: var(--ox-checkbox-size, 15px);\n      }\n\n      .label {\n        color: var(--ox-checkbox-label-color, var(--md-sys-color-on-surface-variant));\n        font-size: var(--md-sys-typescale-label-large-size, 0.875rem);\n        line-height: var(--md-sys-typescale-label-medium-line-height, 1rem);\n      }\n      :host([checked]) .label {\n        font-weight: 700;\n      }\n    `\n  ]\n\n  @property({ type: Boolean, attribute: 'checked', reflect: true }) checked: boolean | undefined = false\n  @property({ type: Boolean, attribute: 'indeterminatable' }) indeterminatable: boolean = false\n  @property({ type: Boolean, attribute: 'indeterminate', reflect: true }) indeterminate: boolean = false\n  @property({ type: Boolean, attribute: 'left-label' }) left: boolean = false\n\n  @state() _hasInner: boolean = !!this.innerHTML.trim().length\n\n  render() {\n    return html`\n      <div @click=${this.onClick} ?disabled=${this.disabled}>\n        ${this._hasInner && this.left\n          ? html` <span label>\n              <slot></slot>\n            </span>`\n          : ''}\n        <a href=\"#\" @click=${(e: Event) => e.preventDefault()} class=\"checkbox\">\n          ${this.indeterminate ? this.indeterminateIcon : this.checked ? this.checkedIcon : this.uncheckedIcon}\n        </a>\n        ${this._hasInner && !this.left\n          ? html` <span class=\"label\">\n              <slot></slot>\n            </span>`\n          : ''}\n      </div>\n    `\n  }\n\n  connectedCallback() {\n    super.connectedCallback()\n\n    this.setAttribute('tabindex', '0')\n    this.addEventListener('keydown', this.onKeyDown.bind(this))\n  }\n\n  onClick() {\n    if (this.disabled) {\n      return\n    }\n\n    if (!this.indeterminatable) {\n      this.indeterminate = false\n      this.checked = !this.checked\n    } else {\n      if (this.indeterminate) {\n        this.indeterminate = false\n        this.checked = true\n      } else if (this.checked) {\n        this.indeterminate = false\n        this.checked = false\n      } else {\n        this.indeterminate = true\n        this.checked = undefined\n      }\n    }\n\n    this.dispatchEvent(\n      new CustomEvent('change', {\n        bubbles: true,\n        composed: true,\n        detail: this.checked\n      })\n    )\n  }\n\n  get checkedIcon() {\n    return html`\n      <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n        <path d=\"M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z\" />\n      </svg>\n    `\n  }\n\n  get uncheckedIcon() {\n    return html`\n      <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n        <path d=\"M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z\" />\n      </svg>\n    `\n  }\n\n  get indeterminateIcon() {\n    return html`\n      <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n        <line x1=\"4\" x2=\"20\" y1=\"12\" y2=\"12\" stroke-width=\"2\" stroke-linecap=\"round\" />\n      </svg>\n    `\n  }\n\n  onKeyDown(e: KeyboardEvent) {\n    e.preventDefault()\n\n    if (e.key === ' ' || e.key == 'Spacebar') {\n      this.onClick()\n    }\n  }\n\n  protected appendFormData({ formData }: FormDataEvent): void {\n    this.name && !this.indeterminate && formData.append(this.name, this.checked ? 'true' : 'false')\n  }\n}\n"]}

package/dist/src/ox-input-3axis.js

@@ -13,13 +13,24 @@ let OxInput3Axis = class OxInput3Axis extends OxFormField {
         display: flex;
       }
 
+      input {
+        box-sizing: border-box;
+        padding: 0 var(--spacing-small);
+        height: var(--form-element-height-medium);
+        border: 1px solid var(--md-sys-color-outline);
+        border-radius: var(--md-sys-shape-corner-small);
+        background-color: var(--md-sys-color-on-primary);
+        font-size: var(--md-sys-typescale-label-large-size, 0.875rem);
+        color: var(--md-sys-color-on-primary-container);
+      }
+
       input:not(:last-child) {
         margin-right: var(--margin-default, 2px);
       }
 
       input:focus {
         outline: none;
-        border-bottom: 1px solid var(--primary-color);
+        border-color: var(--md-sys-color-secondary-fixed-dim);
       }
     `
     ]; }