tinkiet 0.8.30 → 0.9.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/accordion/accordion.scss.js +2 -2
- package/badge/badge.d.ts +5 -3
- package/badge/badge.js +15 -11
- package/badge/badge.scss.js +2 -2
- package/box/box.d.ts +1 -1
- package/box/box.js +5 -5
- package/box/box.scss.js +2 -2
- package/button/button.d.ts +4 -0
- package/button/button.js +31 -15
- package/button/button.scss.js +2 -2
- package/checkbox/checkbox.d.ts +1 -0
- package/checkbox/checkbox.js +13 -7
- package/checkbox/checkbox.scss.js +2 -2
- package/{tag/tag.d.ts → chip/chip.d.ts} +3 -3
- package/chip/chip.js +20 -0
- package/{tag/tag.scss.js → chip/chip.scss.js} +2 -2
- package/chip/index.d.ts +1 -0
- package/chip/index.js +1 -0
- package/drawer/drawer.scss.js +2 -2
- package/form/form.d.ts +0 -1
- package/form/form.js +0 -3
- package/index.d.ts +3 -2
- package/index.d.ts.map +1 -1
- package/index.js +7 -4
- package/list-item/list-item.d.ts +1 -0
- package/list-item/list-item.js +10 -1
- package/list-item/list-item.scss.js +2 -2
- package/loading/loading.scss.js +2 -2
- package/navigation/index.d.ts +2 -0
- package/navigation/index.js +2 -0
- package/navigation/navigation-bar.d.ts +11 -0
- package/navigation/navigation-bar.js +20 -0
- package/navigation/navigation-bar.scss.js +4 -0
- package/navigation/navigation-item.d.ts +15 -0
- package/navigation/navigation-item.js +51 -0
- package/navigation/navigation-item.scss.js +4 -0
- package/notie/notie.scss.js +2 -2
- package/package.json +2 -2
- package/radio/radio.js +10 -3
- package/radio/radio.scss.js +2 -2
- package/select/select.scss.js +2 -2
- package/slider/slider.scss.js +2 -2
- package/switch/switch.js +3 -1
- package/switch/switch.scss.js +2 -2
- package/tab-group/tab-group.d.ts +1 -1
- package/tab-group/tab-group.js +5 -16
- package/tab-group/tab-group.scss.js +2 -2
- package/textarea/textarea.scss.js +2 -2
- package/textfield/textfield.scss.js +2 -2
- package/theme/theme.d.ts +12 -17
- package/theme/theme.js +60 -110
- package/theme/theme.scss.js +2 -2
- package/topbar/index.d.ts +1 -0
- package/topbar/index.js +1 -0
- package/{navbar/navbar.d.ts → topbar/topbar.d.ts} +3 -3
- package/{navbar/navbar.js → topbar/topbar.js} +6 -6
- package/topbar/topbar.scss.js +4 -0
- package/umd/tinkiet.min.d.ts +57 -33
- package/umd/tinkiet.min.d.ts.map +1 -1
- package/umd/tinkiet.min.js +1 -1
- package/navbar/index.d.ts +0 -1
- package/navbar/index.js +0 -1
- package/navbar/navbar.scss.js +0 -4
- package/tag/index.d.ts +0 -1
- package/tag/index.js +0 -1
- package/tag/tag.js +0 -20
package/slider/slider.scss.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var css_248z = "*{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:transparent;box-sizing:border-box}:host{--_input-state-color:var(--input-state-color-inactive,var(--shade,hsl(var(--shade-h,0),var(--shade-s,0%),var(--shade-l,66.6667%))));--_input-padding-left-right:var(--input-padding-left-right,0);--_input-bg:var(--input-bg,#0000);--_input-border-radius:0;--_input-color:var(--input-color,var(--foreground,#454545));--_input-label-color:var(--input-label-color,var(--shade,hsl(var(--shade-h,0),var(--shade-s,0%),var(--shade-l,66.6667%))));--_input-border-style:var(--input-border-style,solid);display:block;outline:none;transform:translateZ(0)}:host([disabled]){--_input-state-color:var(--input-state-color-disabled,var(--shade-light,hsl(var(--shade-h,0),var(--shade-s,0%),calc(var(--shade-l, 66.6667%)*1.15))));--_input-label-color:var(--input-label-color-disabled,var(--shade,hsl(var(--shade-h,0),var(--shade-s,0%),var(--shade-l,66.6667%))));--_input-color:var(--input-color-disabled,var(--shade-lighter,hsl(var(--shade-h,0),var(--shade-s,0%),calc(var(--shade-l, 66.6667%)*1.3))));--_input-border-style:var(--input-border-style-disabled,dashed);pointer-events:none}#container{align-items:center;background:var(--_input-bg);border-bottom:var(--input-border-width,.0625rem) var(--_input-border-style) var(--_input-state-color);border-radius:var(--_input-border-radius);color:var(--_input-color);display:flex;font-size:var(--input-font-size,1rem);overflow:hidden;position:relative;transition:var(--input-transition,border-color var(--transition-duration-medium,.18s) var(--transition-timing-function-ease,ease),background var(--transition-duration-medium,.18s) var(--transition-timing-function-ease,ease))}#wrapper{flex-grow:1;position:relative}#label{color:var(--_input-label-color);font-size:inherit;left:var(--_input-padding-left-right);line-height:1;pointer-events:none;position:absolute;top:50%;transform:translateY(-50%);transition:var(--input-label-transition,top var(--transition-duration-fast,.12s) var(--transition-timing-function-linear,linear),font-size var(--transition-duration-fast,.12s) var(--transition-timing-function-linear,linear),transform var(--transition-duration-fast,.12s) var(--transition-timing-function-linear,linear));-webkit-user-select:none;user-select:none;white-space:nowrap;z-index:1}:host(:hover){--_input-state-color:var(--input-state-color-hover,var(--primary,hsl(var(--primary-h,258.987),var(--primary-s,38.1643%),var(--primary-l,59.4118%))))}:host([filled]),:host([outlined]){--_input-padding-left-right:var(--input-padding-left-right-outlined,0.75rem)}:host([filled]){--_input-border-radius:var(--input-border-radius-outlined,0.5rem 0.5rem 0 0);--_input-bg:var(--input-bg,var(--shade-lighter,hsl(var(--shade-h,0),var(--shade-s,0%),calc(var(--shade-l, 66.6667%)*1.3))))}:host([filled]:hover){--_input-bg:var(--input-bg-filled-hover,var(--shade-light,hsl(var(--shade-h,0),var(--shade-s,0%),calc(var(--shade-l, 66.6667%)*1.15))))}:host([outlined]){--_input-border-radius:var(--input-border-radius-outlined,0.5rem)}:host([outlined]) #container{border:var(--input-border-width,.0625rem) var(--_input-border-style) var(--_input-state-color)}:host(:focus-within){--_input-state-color:var(--input-state-color-active,var(--primary,hsl(var(--primary-h,258.987),var(--primary-s,38.1643%),var(--primary-l,59.4118%))))}:host(:focus-within) #label,:host([dirty]) #label,:host([type=color]) #label,:host([type=date]) #label,:host([type=file]) #label,:host([type=range]) #label{font-size:var(--input-label-font-size,.75rem);top:var(--input-padding-top-bottom,.5rem);transform:translateY(0)}#slot-wrapper,::slotted(input),::slotted(select),::slotted(textarea){-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:transparent;-webkit-text-fill-color:var(--_input-color);-webkit-overflow-scrolling:touch;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#0000;border:none;box-sizing:border-box;caret-color:var(--_input-color-state);color:inherit;display:block;font-size:var(--input-font-size,1rem);margin:0;outline:none;padding:var(--input-padding-top-bottom,.5rem) var(--_input-padding-left-right);position:relative;text-align:var(--input-text-align,inherit);width:100%}:host([label]) #slot-wrapper,:host([label]) ::slotted(input),:host([label]) ::slotted(select),:host([label]) ::slotted(textarea){padding-top:calc(var(--input-label-space, .875rem) + var(--input-padding-top-bottom, .5rem))}:host([invalid]){--_input-state-color:var(--input-state-color-invalid,var(--error,hsl(var(--error-h,4.10526),var(--error-s,89.6226%),var(--error-l,58.4314%))))}::slotted(input[type=color]){cursor:pointer;height:3.75rem}::slotted([slot=after]),::slotted([slot=before]){color:var(--input-before-after-color,var(--shade,hsl(var(--shade-h,0),var(--shade-s,0%),var(--shade-l,66.6667%))))}:host(:not([outlined]):not([filled])) ::slotted([slot=before]){margin-right:var(--input-padding-left-right-outlined,.75rem)}:host(:not([outlined]):not([filled])) ::slotted([slot=after]),:host([filled]) ::slotted([slot=before]),:host([outlined]) ::slotted([slot=before]){margin-left:var(--input-padding-left-right-outlined,.75rem)}:host([filled]) ::slotted([slot=after]),:host([outlined]) ::slotted([slot=after]){margin-right:var(--input-padding-left-right-outlined,.75rem)}:host{--_perc:0;--_slider-track-bg:var(--slider-bg,var(--shade-light,hsl(var(--shade-h,0),var(--shade-s,0%),calc(var(--shade-l, 66.6667%)*1.15))));--_slider-track-bg-active:var(--slider-bg-active,var(--primary,hsl(var(--primary-h,258.987),var(--primary-s,38.1643%),var(--primary-l,59.4118%))));--_slider-thumb-bg:var(--slider-thumb-bg,var(--on-primary,hsl(var(--on-primary-h,0),var(--on-primary-s,0%),var(--on-primary-l,100%))));--_slider-thumb-border:var(--slider-thumb-bg,var(--primary,hsl(var(--primary-h,258.987),var(--primary-s,38.1643%),var(--primary-l,59.4118%))))}:host([disabled]){--_slider-track-bg:var(--slider-bg-disabled,var(--shade-lighter,hsl(var(--shade-h,0),var(--shade-s,0%),calc(var(--shade-l, 66.6667%)*1.3))));--_slider-track-bg-active:var(--slider-bg-active-disabled,var(--shade,hsl(var(--shade-h,0),var(--shade-s,0%),var(--shade-l,66.6667%))));--_slider-thumb-bg:var(--slider-thumb-bg-disabled,var(--shade-light,hsl(var(--shade-h,0),var(--shade-s,0%),calc(var(--shade-l, 66.6667%)*1.15))));--_slider-thumb-border:var(--slider-thumb-bg,var(--shade,hsl(var(--shade-h,0),var(--shade-s,0%),var(--shade-l,66.6667%))))}:host([thumblabel-persist]) #container,:host([thumblabel]) #container{padding-top:33px}#container{border:none;overflow:visible}#slider{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:linear-gradient(90deg,var(--_slider-track-bg-active) 0,var(--_slider-track-bg-active) calc(var(--_perc)*100%),var(--_slider-track-bg) calc(var(--_perc)*100%),var(--_slider-track-bg));border:none;border-radius:0;box-sizing:border-box;cursor:grab;height:var(--slider-height,.3125rem);margin:0;outline:none;top:calc(var(--slider-height, .3125rem)*-1/2)}#slider,#thumb-container{position:relative;width:100%}#thumb-label{--_thumb-label-transform-y:0.625rem;-webkit-text-fill-color:var(--slider-thumb-label-color,var(--on-primary,hsl(var(--on-primary-h,0),var(--on-primary-s,0%),var(--on-primary-l,100%))));align-items:center;border-radius:var(--slider-thumb-label-border-radius,100%);bottom:calc(100% + var(--slider-thumb-size, .75rem) + var(--slider-height, .3125rem) + var(--slider-thumb-space, .75rem));color:var(--slider-thumb-label-color,var(--on-primary,hsl(var(--on-primary-h,0),var(--on-primary-s,0%),var(--on-primary-l,100%))));display:flex;font-size:var(--slider-thumb-label-font-size,.75rem);height:var(--slider-thumb-label-size,1.875rem);justify-content:center;left:calc(var(--_perc)*100% - var(--slider-thumb-size, 1.2rem)*var(--_perc));opacity:0;pointer-events:none;text-overflow:ellipsis;transform:translate(calc(-50% + var(--slider-thumb-size, 1.2rem)/2),var(--_thumb-label-transform-y));transition:var(--slider-thumb-label-transition,opacity var(--transition-duration-fast,.12s) var(--transition-timing-function-deceleration-curve,cubic-bezier(0,0,.2,1)),transform var(--transition-duration-fast,.12s) var(--transition-timing-function-deceleration-curve,cubic-bezier(0,0,.2,1)));width:var(--slider-thumb-label-size,1.875rem)}#thumb-label,#thumb-label:before{background:var(--slider-thumb-label-bg,var(--primary,hsl(var(--primary-h,258.987),var(--primary-s,38.1643%),var(--primary-l,59.4118%))));position:absolute}#thumb-label:before{border-radius:0 50% 50% 50%;content:\"\";height:100%;left:0;top:0;transform:rotate(225deg);width:100%;z-index:-1}#slider:focus+#thumb-container #thumb-label,:host([thumblabel-persist]) #thumb-label,:host:focus #thumb-label{--_thumb-label-transform-y:0;opacity:1}#slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;background:var(--_slider-thumb-bg);border:4px solid var(--_slider-thumb-border);border-radius:var(--slider-thumb-border-radius,100%);box-shadow:0 0 0 0 var(--slider-thumb-focus-ring-bg,rgba(0,0,0,.082));cursor:grab;height:var(--slider-thumb-size,1.2rem);position:relative;-webkit-transition:var(--slider-thumb-transition,transform var(--transition-duration-fast,.12s) var(--transition-timing-function-deceleration-curve,cubic-bezier(0,0,.2,1)),box-shadow var(--transition-duration-fast,.12s) var(--transition-timing-function-deceleration-curve,cubic-bezier(0,0,.2,1)));transition:var(--slider-thumb-transition,transform var(--transition-duration-fast,.12s) var(--transition-timing-function-deceleration-curve,cubic-bezier(0,0,.2,1)),box-shadow var(--transition-duration-fast,.12s) var(--transition-timing-function-deceleration-curve,cubic-bezier(0,0,.2,1)));width:var(--slider-thumb-size,1.2rem)}#slider::-moz-range-thumb{-moz-appearance:none;appearance:none;background:var(--_slider-thumb-bg);border:none;border-radius:var(--slider-thumb-border-radius,100%);box-shadow:0 0 0 0 var(--slider-thumb-focus-ring-bg,rgba(0,0,0,.082));cursor:grab;height:var(--slider-thumb-size,1.2rem);position:relative;-moz-transition:var(--slider-thumb-transition,transform var(--transition-duration-fast,.12s) var(--transition-timing-function-deceleration-curve,cubic-bezier(0,0,.2,1)),box-shadow var(--transition-duration-fast,.12s) var(--transition-timing-function-deceleration-curve,cubic-bezier(0,0,.2,1)));transition:var(--slider-thumb-transition,transform var(--transition-duration-fast,.12s) var(--transition-timing-function-deceleration-curve,cubic-bezier(0,0,.2,1)),box-shadow var(--transition-duration-fast,.12s) var(--transition-timing-function-deceleration-curve,cubic-bezier(0,0,.2,1)));width:var(--slider-thumb-size,1.2rem)}#slider:focus::-webkit-slider-thumb{box-shadow:0 0 0 var(--slider-thumb-focus-ring-size,.75rem) var(--slider-thumb-focus-ring-bg,rgba(0,0,0,.082));transform:var(--slider-thumb-transform-focus,scale(1.2))}#slider:focus::-moz-range-thumb{box-shadow:0 0 0 var(--slider-thumb-focus-ring-size,.75rem) var(--slider-thumb-focus-ring-bg,rgba(0,0,0,.082));transform:var(--slider-thumb-transform-focus,scale(1.2))}";
|
|
2
|
-
var stylesheet="*{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:transparent;box-sizing:border-box}:host{--_input-state-color:var(--input-state-color-inactive,var(--shade,hsl(var(--shade-h,0),var(--shade-s,0%),var(--shade-l,66.6667%))));--_input-padding-left-right:var(--input-padding-left-right,0);--_input-bg:var(--input-bg,#0000);--_input-border-radius:0;--_input-color:var(--input-color,var(--foreground,#454545));--_input-label-color:var(--input-label-color,var(--shade,hsl(var(--shade-h,0),var(--shade-s,0%),var(--shade-l,66.6667%))));--_input-border-style:var(--input-border-style,solid);display:block;outline:none;transform:translateZ(0)}:host([disabled]){--_input-state-color:var(--input-state-color-disabled,var(--shade-light,hsl(var(--shade-h,0),var(--shade-s,0%),calc(var(--shade-l, 66.6667%)*1.15))));--_input-label-color:var(--input-label-color-disabled,var(--shade,hsl(var(--shade-h,0),var(--shade-s,0%),var(--shade-l,66.6667%))));--_input-color:var(--input-color-disabled,var(--shade-lighter,hsl(var(--shade-h,0),var(--shade-s,0%),calc(var(--shade-l, 66.6667%)*1.3))));--_input-border-style:var(--input-border-style-disabled,dashed);pointer-events:none}#container{align-items:center;background:var(--_input-bg);border-bottom:var(--input-border-width,.0625rem) var(--_input-border-style) var(--_input-state-color);border-radius:var(--_input-border-radius);color:var(--_input-color);display:flex;font-size:var(--input-font-size,1rem);overflow:hidden;position:relative;transition:var(--input-transition,border-color var(--transition-duration-medium,.18s) var(--transition-timing-function-ease,ease),background var(--transition-duration-medium,.18s) var(--transition-timing-function-ease,ease))}#wrapper{flex-grow:1;position:relative}#label{color:var(--_input-label-color);font-size:inherit;left:var(--_input-padding-left-right);line-height:1;pointer-events:none;position:absolute;top:50%;transform:translateY(-50%);transition:var(--input-label-transition,top var(--transition-duration-fast,.12s) var(--transition-timing-function-linear,linear),font-size var(--transition-duration-fast,.12s) var(--transition-timing-function-linear,linear),transform var(--transition-duration-fast,.12s) var(--transition-timing-function-linear,linear));-webkit-user-select:none;user-select:none;white-space:nowrap;z-index:1}:host(:hover){--_input-state-color:var(--input-state-color-hover,var(--primary,hsl(var(--primary-h,258.987),var(--primary-s,38.1643%),var(--primary-l,59.4118%))))}:host([filled]),:host([outlined]){--_input-padding-left-right:var(--input-padding-left-right-outlined,0.75rem)}:host([filled]){--_input-border-radius:var(--input-border-radius-outlined,0.5rem 0.5rem 0 0);--_input-bg:var(--input-bg,var(--shade-lighter,hsl(var(--shade-h,0),var(--shade-s,0%),calc(var(--shade-l, 66.6667%)*1.3))))}:host([filled]:hover){--_input-bg:var(--input-bg-filled-hover,var(--shade-light,hsl(var(--shade-h,0),var(--shade-s,0%),calc(var(--shade-l, 66.6667%)*1.15))))}:host([outlined]){--_input-border-radius:var(--input-border-radius-outlined,0.5rem)}:host([outlined]) #container{border:var(--input-border-width,.0625rem) var(--_input-border-style) var(--_input-state-color)}:host(:focus-within){--_input-state-color:var(--input-state-color-active,var(--primary,hsl(var(--primary-h,258.987),var(--primary-s,38.1643%),var(--primary-l,59.4118%))))}:host(:focus-within) #label,:host([dirty]) #label,:host([type=color]) #label,:host([type=date]) #label,:host([type=file]) #label,:host([type=range]) #label{font-size:var(--input-label-font-size,.75rem);top:var(--input-padding-top-bottom,.5rem);transform:translateY(0)}#slot-wrapper,::slotted(input),::slotted(select),::slotted(textarea){-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:transparent;-webkit-text-fill-color:var(--_input-color);-webkit-overflow-scrolling:touch;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#0000;border:none;box-sizing:border-box;caret-color:var(--_input-color-state);color:inherit;display:block;font-size:var(--input-font-size,1rem);margin:0;outline:none;padding:var(--input-padding-top-bottom,.5rem) var(--_input-padding-left-right);position:relative;text-align:var(--input-text-align,inherit);width:100%}:host([label]) #slot-wrapper,:host([label]) ::slotted(input),:host([label]) ::slotted(select),:host([label]) ::slotted(textarea){padding-top:calc(var(--input-label-space, .875rem) + var(--input-padding-top-bottom, .5rem))}:host([invalid]){--_input-state-color:var(--input-state-color-invalid,var(--error,hsl(var(--error-h,4.10526),var(--error-s,89.6226%),var(--error-l,58.4314%))))}::slotted(input[type=color]){cursor:pointer;height:3.75rem}::slotted([slot=after]),::slotted([slot=before]){color:var(--input-before-after-color,var(--shade,hsl(var(--shade-h,0),var(--shade-s,0%),var(--shade-l,66.6667%))))}:host(:not([outlined]):not([filled])) ::slotted([slot=before]){margin-right:var(--input-padding-left-right-outlined,.75rem)}:host(:not([outlined]):not([filled])) ::slotted([slot=after]),:host([filled]) ::slotted([slot=before]),:host([outlined]) ::slotted([slot=before]){margin-left:var(--input-padding-left-right-outlined,.75rem)}:host([filled]) ::slotted([slot=after]),:host([outlined]) ::slotted([slot=after]){margin-right:var(--input-padding-left-right-outlined,.75rem)}:host{--_perc:0;--_slider-track-bg:var(--slider-bg,var(--shade-light,hsl(var(--shade-h,0),var(--shade-s,0%),calc(var(--shade-l, 66.6667%)*1.15))));--_slider-track-bg-active:var(--slider-bg-active,var(--primary,hsl(var(--primary-h,258.987),var(--primary-s,38.1643%),var(--primary-l,59.4118%))));--_slider-thumb-bg:var(--slider-thumb-bg,var(--on-primary,hsl(var(--on-primary-h,0),var(--on-primary-s,0%),var(--on-primary-l,100%))));--_slider-thumb-border:var(--slider-thumb-bg,var(--primary,hsl(var(--primary-h,258.987),var(--primary-s,38.1643%),var(--primary-l,59.4118%))))}:host([disabled]){--_slider-track-bg:var(--slider-bg-disabled,var(--shade-lighter,hsl(var(--shade-h,0),var(--shade-s,0%),calc(var(--shade-l, 66.6667%)*1.3))));--_slider-track-bg-active:var(--slider-bg-active-disabled,var(--shade,hsl(var(--shade-h,0),var(--shade-s,0%),var(--shade-l,66.6667%))));--_slider-thumb-bg:var(--slider-thumb-bg-disabled,var(--shade-light,hsl(var(--shade-h,0),var(--shade-s,0%),calc(var(--shade-l, 66.6667%)*1.15))));--_slider-thumb-border:var(--slider-thumb-bg,var(--shade,hsl(var(--shade-h,0),var(--shade-s,0%),var(--shade-l,66.6667%))))}:host([thumblabel-persist]) #container,:host([thumblabel]) #container{padding-top:33px}#container{border:none;overflow:visible}#slider{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:linear-gradient(90deg,var(--_slider-track-bg-active) 0,var(--_slider-track-bg-active) calc(var(--_perc)*100%),var(--_slider-track-bg) calc(var(--_perc)*100%),var(--_slider-track-bg));border:none;border-radius:0;box-sizing:border-box;cursor:grab;height:var(--slider-height,.3125rem);margin:0;outline:none;top:calc(var(--slider-height, .3125rem)*-1/2)}#slider,#thumb-container{position:relative;width:100%}#thumb-label{--_thumb-label-transform-y:0.625rem;-webkit-text-fill-color:var(--slider-thumb-label-color,var(--on-primary,hsl(var(--on-primary-h,0),var(--on-primary-s,0%),var(--on-primary-l,100%))));align-items:center;border-radius:var(--slider-thumb-label-border-radius,100%);bottom:calc(100% + var(--slider-thumb-size, .75rem) + var(--slider-height, .3125rem) + var(--slider-thumb-space, .75rem));color:var(--slider-thumb-label-color,var(--on-primary,hsl(var(--on-primary-h,0),var(--on-primary-s,0%),var(--on-primary-l,100%))));display:flex;font-size:var(--slider-thumb-label-font-size,.75rem);height:var(--slider-thumb-label-size,1.875rem);justify-content:center;left:calc(var(--_perc)*100% - var(--slider-thumb-size, 1.2rem)*var(--_perc));opacity:0;pointer-events:none;text-overflow:ellipsis;transform:translate(calc(-50% + var(--slider-thumb-size, 1.2rem)/2),var(--_thumb-label-transform-y));transition:var(--slider-thumb-label-transition,opacity var(--transition-duration-fast,.12s) var(--transition-timing-function-deceleration-curve,cubic-bezier(0,0,.2,1)),transform var(--transition-duration-fast,.12s) var(--transition-timing-function-deceleration-curve,cubic-bezier(0,0,.2,1)));width:var(--slider-thumb-label-size,1.875rem)}#thumb-label,#thumb-label:before{background:var(--slider-thumb-label-bg,var(--primary,hsl(var(--primary-h,258.987),var(--primary-s,38.1643%),var(--primary-l,59.4118%))));position:absolute}#thumb-label:before{border-radius:0 50% 50% 50%;content:\"\";height:100%;left:0;top:0;transform:rotate(225deg);width:100%;z-index:-1}#slider:focus+#thumb-container #thumb-label,:host([thumblabel-persist]) #thumb-label,:host:focus #thumb-label{--_thumb-label-transform-y:0;opacity:1}#slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;background:var(--_slider-thumb-bg);border:4px solid var(--_slider-thumb-border);border-radius:var(--slider-thumb-border-radius,100%);box-shadow:0 0 0 0 var(--slider-thumb-focus-ring-bg,rgba(0,0,0,.082));cursor:grab;height:var(--slider-thumb-size,1.2rem);position:relative;-webkit-transition:var(--slider-thumb-transition,transform var(--transition-duration-fast,.12s) var(--transition-timing-function-deceleration-curve,cubic-bezier(0,0,.2,1)),box-shadow var(--transition-duration-fast,.12s) var(--transition-timing-function-deceleration-curve,cubic-bezier(0,0,.2,1)));transition:var(--slider-thumb-transition,transform var(--transition-duration-fast,.12s) var(--transition-timing-function-deceleration-curve,cubic-bezier(0,0,.2,1)),box-shadow var(--transition-duration-fast,.12s) var(--transition-timing-function-deceleration-curve,cubic-bezier(0,0,.2,1)));width:var(--slider-thumb-size,1.2rem)}#slider::-moz-range-thumb{-moz-appearance:none;appearance:none;background:var(--_slider-thumb-bg);border:none;border-radius:var(--slider-thumb-border-radius,100%);box-shadow:0 0 0 0 var(--slider-thumb-focus-ring-bg,rgba(0,0,0,.082));cursor:grab;height:var(--slider-thumb-size,1.2rem);position:relative;-moz-transition:var(--slider-thumb-transition,transform var(--transition-duration-fast,.12s) var(--transition-timing-function-deceleration-curve,cubic-bezier(0,0,.2,1)),box-shadow var(--transition-duration-fast,.12s) var(--transition-timing-function-deceleration-curve,cubic-bezier(0,0,.2,1)));transition:var(--slider-thumb-transition,transform var(--transition-duration-fast,.12s) var(--transition-timing-function-deceleration-curve,cubic-bezier(0,0,.2,1)),box-shadow var(--transition-duration-fast,.12s) var(--transition-timing-function-deceleration-curve,cubic-bezier(0,0,.2,1)));width:var(--slider-thumb-size,1.2rem)}#slider:focus::-webkit-slider-thumb{box-shadow:0 0 0 var(--slider-thumb-focus-ring-size,.75rem) var(--slider-thumb-focus-ring-bg,rgba(0,0,0,.082));transform:var(--slider-thumb-transform-focus,scale(1.2))}#slider:focus::-moz-range-thumb{box-shadow:0 0 0 var(--slider-thumb-focus-ring-size,.75rem) var(--slider-thumb-focus-ring-bg,rgba(0,0,0,.082));transform:var(--slider-thumb-transform-focus,scale(1.2))}";
|
|
1
|
+
var css_248z = "*{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:transparent;box-sizing:border-box}:host{display:block;outline:none;transform:translateZ(0)}:host #container{align-items:center;background-color:hsla(var(--surface-container-highest),.5);border-bottom:1px solid hsl(var(--on-surface-variant));border-radius:4px 4px 0 0;color:hsl(var(--on-surface));display:flex;font-size:var(--input-font-size,1rem);height:56px;overflow:hidden;padding:8px 16px;position:relative;transition:var(--input-transition,border-color var(--transition-duration-medium,.18s) var(--transition-timing-function-ease,ease),background var(--transition-duration-medium,.18s) var(--transition-timing-function-ease,ease))}:host #wrapper{flex-grow:1;position:relative}:host #label{color:hsl(var(--on-surface-variant));font-size:inherit;font-weight:400;line-height:64px;line-height:1;pointer-events:none;position:absolute;top:50%;transform:translateY(-50%);transition:var(--input-label-transition,top var(--transition-duration-fast,.12s) var(--transition-timing-function-linear,linear),font-size var(--transition-duration-fast,.12s) var(--transition-timing-function-linear,linear),transform var(--transition-duration-fast,.12s) var(--transition-timing-function-linear,linear));-webkit-user-select:none;user-select:none;white-space:nowrap;z-index:1}:host([disabled]){opacity:.38;pointer-events:none}:host(:hover) #container{background-color:hsla(var(--surface-container-highest),.5);border-bottom:1px solid hsl(var(--on-surface));border-radius:4px 4px 0 0;color:hsl(var(--on-surface));font-size:var(--input-font-size,1rem)}:host(:focus-within) #container{background-color:hsla(var(--on-surface),.3);border-bottom:2px solid hsl(var(--primary));padding:8px 16px 7px}:host([outlined]) #container{background-color:initial;border:1px solid hsl(var(--outline));border-radius:4px}:host([outlined]:focus-within) #container{border:2px solid hsl(var(--primary));padding:7px 15px}:host(:focus-within) #label,:host([dirty]) #label,:host([type=color]) #label,:host([type=date]) #label,:host([type=file]) #label,:host([type=range]) #label{color:hsl(var(--primary));font-size:var(--input-label-font-size,.75rem);top:0;transform:translateY(0)}#slot-wrapper,::slotted(input),::slotted(select),::slotted(textarea){-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:transparent;-webkit-text-fill-color:var(--_input-color);-webkit-overflow-scrolling:touch;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#0000;border:none;box-sizing:border-box;caret-color:hsl(var(--primary));color:inherit;display:block;font-size:var(--input-font-size,1rem);margin:0;outline:none;padding:var(--input-padding-top-bottom,.5rem) var(--_input-padding-left-right);position:relative;text-align:var(--input-text-align,inherit);width:100%}:host([label]) #slot-wrapper,:host([label]) ::slotted(input),:host([label]) ::slotted(select),:host([label]) ::slotted(textarea){padding-top:16px}:host([invalid]){color:hsl(var(--error))}::slotted(input[type=color]){cursor:pointer;height:3.75rem}::slotted([slot=after]),::slotted([slot=before]){color:var(--input-before-after-color,hsl(var(--shadow)))}:host(:not([outlined]):not([filled])) ::slotted([slot=before]){margin-right:var(--input-padding-left-right-outlined,.75rem)}:host(:not([outlined]):not([filled])) ::slotted([slot=after]),:host([filled]) ::slotted([slot=before]),:host([outlined]) ::slotted([slot=before]){margin-left:var(--input-padding-left-right-outlined,.75rem)}:host([filled]) ::slotted([slot=after]),:host([outlined]) ::slotted([slot=after]){margin-right:var(--input-padding-left-right-outlined,.75rem)}:host{--_perc:0;--_slider-track-bg:var(--slider-bg,hsl(var(--shadow)));--_slider-track-bg-active:var(--slider-bg-active,hsl(var(--primary)));--_slider-thumb-bg:var(--slider-thumb-bg,hsl(var(--on-primary)));--_slider-thumb-border:var(--slider-thumb-bg,hsl(var(--primary)))}:host([disabled]){--_slider-track-bg:var(--slider-bg-disabled,hsl(var(--shadow)));--_slider-track-bg-active:var(--slider-bg-active-disabled,hsl(var(--shadow)));--_slider-thumb-bg:var(--slider-thumb-bg-disabled,hsl(var(--shadow)));--_slider-thumb-border:var(--slider-thumb-bg,hsl(var(--shadow)))}:host([thumblabel-persist]) #container,:host([thumblabel]) #container{padding-top:33px}#container{border:none;overflow:visible}#slider{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:linear-gradient(90deg,var(--_slider-track-bg-active) 0,var(--_slider-track-bg-active) calc(var(--_perc)*100%),var(--_slider-track-bg) calc(var(--_perc)*100%),var(--_slider-track-bg));border:none;border-radius:0;box-sizing:border-box;cursor:grab;height:var(--slider-height,.3125rem);margin:0;outline:none;top:calc(var(--slider-height, .3125rem)*-1/2)}#slider,#thumb-container{position:relative;width:100%}#thumb-label{--_thumb-label-transform-y:0.625rem;-webkit-text-fill-color:var(--slider-thumb-label-color,hsl(var(--on-primary)));align-items:center;border-radius:var(--slider-thumb-label-border-radius,100%);bottom:calc(100% + var(--slider-thumb-size, .75rem) + var(--slider-height, .3125rem) + var(--slider-thumb-space, .75rem));color:var(--slider-thumb-label-color,hsl(var(--on-primary)));display:flex;font-size:var(--slider-thumb-label-font-size,.75rem);height:var(--slider-thumb-label-size,1.875rem);justify-content:center;left:calc(var(--_perc)*100% - var(--slider-thumb-size, 1.2rem)*var(--_perc));opacity:0;pointer-events:none;text-overflow:ellipsis;transform:translate(calc(-50% + var(--slider-thumb-size, 1.2rem)/2),var(--_thumb-label-transform-y));transition:var(--slider-thumb-label-transition,opacity var(--transition-duration-fast,.12s) var(--transition-timing-function-deceleration-curve,cubic-bezier(0,0,.2,1)),transform var(--transition-duration-fast,.12s) var(--transition-timing-function-deceleration-curve,cubic-bezier(0,0,.2,1)));width:var(--slider-thumb-label-size,1.875rem)}#thumb-label,#thumb-label:before{background:var(--slider-thumb-label-bg,hsl(var(--primary)));position:absolute}#thumb-label:before{border-radius:0 50% 50% 50%;content:\"\";height:100%;left:0;top:0;transform:rotate(225deg);width:100%;z-index:-1}#slider:focus+#thumb-container #thumb-label,:host([thumblabel-persist]) #thumb-label,:host:focus #thumb-label{--_thumb-label-transform-y:0;opacity:1}#slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;background:var(--_slider-thumb-bg);border:4px solid var(--_slider-thumb-border);border-radius:var(--slider-thumb-border-radius,100%);box-shadow:0 0 0 0 var(--slider-thumb-focus-ring-bg,rgba(0,0,0,.082));cursor:grab;height:var(--slider-thumb-size,1.2rem);position:relative;-webkit-transition:var(--slider-thumb-transition,transform var(--transition-duration-fast,.12s) var(--transition-timing-function-deceleration-curve,cubic-bezier(0,0,.2,1)),box-shadow var(--transition-duration-fast,.12s) var(--transition-timing-function-deceleration-curve,cubic-bezier(0,0,.2,1)));transition:var(--slider-thumb-transition,transform var(--transition-duration-fast,.12s) var(--transition-timing-function-deceleration-curve,cubic-bezier(0,0,.2,1)),box-shadow var(--transition-duration-fast,.12s) var(--transition-timing-function-deceleration-curve,cubic-bezier(0,0,.2,1)));width:var(--slider-thumb-size,1.2rem)}#slider::-moz-range-thumb{-moz-appearance:none;appearance:none;background:var(--_slider-thumb-bg);border:none;border-radius:var(--slider-thumb-border-radius,100%);box-shadow:0 0 0 0 var(--slider-thumb-focus-ring-bg,rgba(0,0,0,.082));cursor:grab;height:var(--slider-thumb-size,1.2rem);position:relative;-moz-transition:var(--slider-thumb-transition,transform var(--transition-duration-fast,.12s) var(--transition-timing-function-deceleration-curve,cubic-bezier(0,0,.2,1)),box-shadow var(--transition-duration-fast,.12s) var(--transition-timing-function-deceleration-curve,cubic-bezier(0,0,.2,1)));transition:var(--slider-thumb-transition,transform var(--transition-duration-fast,.12s) var(--transition-timing-function-deceleration-curve,cubic-bezier(0,0,.2,1)),box-shadow var(--transition-duration-fast,.12s) var(--transition-timing-function-deceleration-curve,cubic-bezier(0,0,.2,1)));width:var(--slider-thumb-size,1.2rem)}#slider:focus::-webkit-slider-thumb{box-shadow:0 0 0 var(--slider-thumb-focus-ring-size,.75rem) var(--slider-thumb-focus-ring-bg,rgba(0,0,0,.082));transform:var(--slider-thumb-transform-focus,scale(1.2))}#slider:focus::-moz-range-thumb{box-shadow:0 0 0 var(--slider-thumb-focus-ring-size,.75rem) var(--slider-thumb-focus-ring-bg,rgba(0,0,0,.082));transform:var(--slider-thumb-transform-focus,scale(1.2))}";
|
|
2
|
+
var stylesheet="*{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:transparent;box-sizing:border-box}:host{display:block;outline:none;transform:translateZ(0)}:host #container{align-items:center;background-color:hsla(var(--surface-container-highest),.5);border-bottom:1px solid hsl(var(--on-surface-variant));border-radius:4px 4px 0 0;color:hsl(var(--on-surface));display:flex;font-size:var(--input-font-size,1rem);height:56px;overflow:hidden;padding:8px 16px;position:relative;transition:var(--input-transition,border-color var(--transition-duration-medium,.18s) var(--transition-timing-function-ease,ease),background var(--transition-duration-medium,.18s) var(--transition-timing-function-ease,ease))}:host #wrapper{flex-grow:1;position:relative}:host #label{color:hsl(var(--on-surface-variant));font-size:inherit;font-weight:400;line-height:64px;line-height:1;pointer-events:none;position:absolute;top:50%;transform:translateY(-50%);transition:var(--input-label-transition,top var(--transition-duration-fast,.12s) var(--transition-timing-function-linear,linear),font-size var(--transition-duration-fast,.12s) var(--transition-timing-function-linear,linear),transform var(--transition-duration-fast,.12s) var(--transition-timing-function-linear,linear));-webkit-user-select:none;user-select:none;white-space:nowrap;z-index:1}:host([disabled]){opacity:.38;pointer-events:none}:host(:hover) #container{background-color:hsla(var(--surface-container-highest),.5);border-bottom:1px solid hsl(var(--on-surface));border-radius:4px 4px 0 0;color:hsl(var(--on-surface));font-size:var(--input-font-size,1rem)}:host(:focus-within) #container{background-color:hsla(var(--on-surface),.3);border-bottom:2px solid hsl(var(--primary));padding:8px 16px 7px}:host([outlined]) #container{background-color:initial;border:1px solid hsl(var(--outline));border-radius:4px}:host([outlined]:focus-within) #container{border:2px solid hsl(var(--primary));padding:7px 15px}:host(:focus-within) #label,:host([dirty]) #label,:host([type=color]) #label,:host([type=date]) #label,:host([type=file]) #label,:host([type=range]) #label{color:hsl(var(--primary));font-size:var(--input-label-font-size,.75rem);top:0;transform:translateY(0)}#slot-wrapper,::slotted(input),::slotted(select),::slotted(textarea){-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:transparent;-webkit-text-fill-color:var(--_input-color);-webkit-overflow-scrolling:touch;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#0000;border:none;box-sizing:border-box;caret-color:hsl(var(--primary));color:inherit;display:block;font-size:var(--input-font-size,1rem);margin:0;outline:none;padding:var(--input-padding-top-bottom,.5rem) var(--_input-padding-left-right);position:relative;text-align:var(--input-text-align,inherit);width:100%}:host([label]) #slot-wrapper,:host([label]) ::slotted(input),:host([label]) ::slotted(select),:host([label]) ::slotted(textarea){padding-top:16px}:host([invalid]){color:hsl(var(--error))}::slotted(input[type=color]){cursor:pointer;height:3.75rem}::slotted([slot=after]),::slotted([slot=before]){color:var(--input-before-after-color,hsl(var(--shadow)))}:host(:not([outlined]):not([filled])) ::slotted([slot=before]){margin-right:var(--input-padding-left-right-outlined,.75rem)}:host(:not([outlined]):not([filled])) ::slotted([slot=after]),:host([filled]) ::slotted([slot=before]),:host([outlined]) ::slotted([slot=before]){margin-left:var(--input-padding-left-right-outlined,.75rem)}:host([filled]) ::slotted([slot=after]),:host([outlined]) ::slotted([slot=after]){margin-right:var(--input-padding-left-right-outlined,.75rem)}:host{--_perc:0;--_slider-track-bg:var(--slider-bg,hsl(var(--shadow)));--_slider-track-bg-active:var(--slider-bg-active,hsl(var(--primary)));--_slider-thumb-bg:var(--slider-thumb-bg,hsl(var(--on-primary)));--_slider-thumb-border:var(--slider-thumb-bg,hsl(var(--primary)))}:host([disabled]){--_slider-track-bg:var(--slider-bg-disabled,hsl(var(--shadow)));--_slider-track-bg-active:var(--slider-bg-active-disabled,hsl(var(--shadow)));--_slider-thumb-bg:var(--slider-thumb-bg-disabled,hsl(var(--shadow)));--_slider-thumb-border:var(--slider-thumb-bg,hsl(var(--shadow)))}:host([thumblabel-persist]) #container,:host([thumblabel]) #container{padding-top:33px}#container{border:none;overflow:visible}#slider{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:linear-gradient(90deg,var(--_slider-track-bg-active) 0,var(--_slider-track-bg-active) calc(var(--_perc)*100%),var(--_slider-track-bg) calc(var(--_perc)*100%),var(--_slider-track-bg));border:none;border-radius:0;box-sizing:border-box;cursor:grab;height:var(--slider-height,.3125rem);margin:0;outline:none;top:calc(var(--slider-height, .3125rem)*-1/2)}#slider,#thumb-container{position:relative;width:100%}#thumb-label{--_thumb-label-transform-y:0.625rem;-webkit-text-fill-color:var(--slider-thumb-label-color,hsl(var(--on-primary)));align-items:center;border-radius:var(--slider-thumb-label-border-radius,100%);bottom:calc(100% + var(--slider-thumb-size, .75rem) + var(--slider-height, .3125rem) + var(--slider-thumb-space, .75rem));color:var(--slider-thumb-label-color,hsl(var(--on-primary)));display:flex;font-size:var(--slider-thumb-label-font-size,.75rem);height:var(--slider-thumb-label-size,1.875rem);justify-content:center;left:calc(var(--_perc)*100% - var(--slider-thumb-size, 1.2rem)*var(--_perc));opacity:0;pointer-events:none;text-overflow:ellipsis;transform:translate(calc(-50% + var(--slider-thumb-size, 1.2rem)/2),var(--_thumb-label-transform-y));transition:var(--slider-thumb-label-transition,opacity var(--transition-duration-fast,.12s) var(--transition-timing-function-deceleration-curve,cubic-bezier(0,0,.2,1)),transform var(--transition-duration-fast,.12s) var(--transition-timing-function-deceleration-curve,cubic-bezier(0,0,.2,1)));width:var(--slider-thumb-label-size,1.875rem)}#thumb-label,#thumb-label:before{background:var(--slider-thumb-label-bg,hsl(var(--primary)));position:absolute}#thumb-label:before{border-radius:0 50% 50% 50%;content:\"\";height:100%;left:0;top:0;transform:rotate(225deg);width:100%;z-index:-1}#slider:focus+#thumb-container #thumb-label,:host([thumblabel-persist]) #thumb-label,:host:focus #thumb-label{--_thumb-label-transform-y:0;opacity:1}#slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;background:var(--_slider-thumb-bg);border:4px solid var(--_slider-thumb-border);border-radius:var(--slider-thumb-border-radius,100%);box-shadow:0 0 0 0 var(--slider-thumb-focus-ring-bg,rgba(0,0,0,.082));cursor:grab;height:var(--slider-thumb-size,1.2rem);position:relative;-webkit-transition:var(--slider-thumb-transition,transform var(--transition-duration-fast,.12s) var(--transition-timing-function-deceleration-curve,cubic-bezier(0,0,.2,1)),box-shadow var(--transition-duration-fast,.12s) var(--transition-timing-function-deceleration-curve,cubic-bezier(0,0,.2,1)));transition:var(--slider-thumb-transition,transform var(--transition-duration-fast,.12s) var(--transition-timing-function-deceleration-curve,cubic-bezier(0,0,.2,1)),box-shadow var(--transition-duration-fast,.12s) var(--transition-timing-function-deceleration-curve,cubic-bezier(0,0,.2,1)));width:var(--slider-thumb-size,1.2rem)}#slider::-moz-range-thumb{-moz-appearance:none;appearance:none;background:var(--_slider-thumb-bg);border:none;border-radius:var(--slider-thumb-border-radius,100%);box-shadow:0 0 0 0 var(--slider-thumb-focus-ring-bg,rgba(0,0,0,.082));cursor:grab;height:var(--slider-thumb-size,1.2rem);position:relative;-moz-transition:var(--slider-thumb-transition,transform var(--transition-duration-fast,.12s) var(--transition-timing-function-deceleration-curve,cubic-bezier(0,0,.2,1)),box-shadow var(--transition-duration-fast,.12s) var(--transition-timing-function-deceleration-curve,cubic-bezier(0,0,.2,1)));transition:var(--slider-thumb-transition,transform var(--transition-duration-fast,.12s) var(--transition-timing-function-deceleration-curve,cubic-bezier(0,0,.2,1)),box-shadow var(--transition-duration-fast,.12s) var(--transition-timing-function-deceleration-curve,cubic-bezier(0,0,.2,1)));width:var(--slider-thumb-size,1.2rem)}#slider:focus::-webkit-slider-thumb{box-shadow:0 0 0 var(--slider-thumb-focus-ring-size,.75rem) var(--slider-thumb-focus-ring-bg,rgba(0,0,0,.082));transform:var(--slider-thumb-transform-focus,scale(1.2))}#slider:focus::-moz-range-thumb{box-shadow:0 0 0 var(--slider-thumb-focus-ring-size,.75rem) var(--slider-thumb-focus-ring-bg,rgba(0,0,0,.082));transform:var(--slider-thumb-transform-focus,scale(1.2))}";
|
|
3
3
|
|
|
4
4
|
export { css_248z as default, stylesheet };
|
package/switch/switch.js
CHANGED
|
@@ -19,7 +19,9 @@ let TkSwitch = class TkSwitch extends LitElement {
|
|
|
19
19
|
return html `
|
|
20
20
|
<tk-box direction="row" align-items="center">
|
|
21
21
|
<span class="switch">
|
|
22
|
-
<
|
|
22
|
+
<tk-box ripple tabindex="${this.disabled ? -1 : 0}" class="state">
|
|
23
|
+
<span id="knob"></span>
|
|
24
|
+
</tk-box>
|
|
23
25
|
</span>
|
|
24
26
|
<span class="label"><slot></slot></span>
|
|
25
27
|
</tk-box>
|
package/switch/switch.scss.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var css_248z = "*{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:transparent;box-sizing:border-box}:host
|
|
2
|
-
var stylesheet="*{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:transparent;box-sizing:border-box}:host
|
|
1
|
+
var css_248z = "*{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:transparent;box-sizing:border-box}:host .switch{align-items:center;background:hsl(var(--surface-container-highest));border:2px solid hsl(var(--outline));border-radius:9999px;display:inline-flex;flex-shrink:0;height:32px;position:relative;transition:var(--switch-transition,background var(--transition-duration-fast,.12s) var(--transition-timing-function-deceleration-curve,cubic-bezier(0,0,.2,1)));-webkit-user-select:none;user-select:none;width:52px;will-change:background-color}:host .switch .state{align-items:center;border-radius:100%;display:flex;height:40px;justify-content:center;margin-left:-5px;outline:none;overflow:hidden;transition:var(--switch-knob-transition,background var(--transition-duration-fast,.12s) var(--transition-timing-function-deceleration-curve,cubic-bezier(0,0,.2,1)),transform var(--transition-duration-fast,.12s) var(--transition-timing-function-deceleration-curve,cubic-bezier(0,0,.2,1)));width:40px;will-change:background-color,transform}:host .switch .state #knob{background:hsl(var(--outline));border-radius:100%;height:16px;position:absolute;width:16px;will-change:background-color}:host .label{margin-left:10px}:host(:not([disabled])){cursor:pointer}:host([checked]) .switch{background:hsl(var(--primary));border:none}:host([checked]) .switch .state{transform:translateX(18px)}:host([checked]) .switch .state #knob{background:hsl(var(--on-primary));height:24px;width:24px}:host(:focus) .switch .state,:host(:hover) .switch .state{background:hsla(var(--surface-container-highest),.8)}:host([checked]:focus) .switch .state,:host([checked]:hover) .switch .state{background:hsla(var(--primary),.3)}:host([disabled]){pointer-events:none}:host([disabled]) .switch{background:hsla(var(--surface-container-highest),.12);border-color:hsla(var(--on-surface),.12)}:host([disabled]) .switch .state #knob{background:hsla(var(--on-surface),.38)}:host([disabled]) .label{opacity:.6}:host([disabled][checked]) .switch{background:hsla(var(--on-surface),.12);border:none}:host([disabled][checked]) .switch .state #knob{background:hsla(var(--surface),1)}";
|
|
2
|
+
var stylesheet="*{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:transparent;box-sizing:border-box}:host .switch{align-items:center;background:hsl(var(--surface-container-highest));border:2px solid hsl(var(--outline));border-radius:9999px;display:inline-flex;flex-shrink:0;height:32px;position:relative;transition:var(--switch-transition,background var(--transition-duration-fast,.12s) var(--transition-timing-function-deceleration-curve,cubic-bezier(0,0,.2,1)));-webkit-user-select:none;user-select:none;width:52px;will-change:background-color}:host .switch .state{align-items:center;border-radius:100%;display:flex;height:40px;justify-content:center;margin-left:-5px;outline:none;overflow:hidden;transition:var(--switch-knob-transition,background var(--transition-duration-fast,.12s) var(--transition-timing-function-deceleration-curve,cubic-bezier(0,0,.2,1)),transform var(--transition-duration-fast,.12s) var(--transition-timing-function-deceleration-curve,cubic-bezier(0,0,.2,1)));width:40px;will-change:background-color,transform}:host .switch .state #knob{background:hsl(var(--outline));border-radius:100%;height:16px;position:absolute;width:16px;will-change:background-color}:host .label{margin-left:10px}:host(:not([disabled])){cursor:pointer}:host([checked]) .switch{background:hsl(var(--primary));border:none}:host([checked]) .switch .state{transform:translateX(18px)}:host([checked]) .switch .state #knob{background:hsl(var(--on-primary));height:24px;width:24px}:host(:focus) .switch .state,:host(:hover) .switch .state{background:hsla(var(--surface-container-highest),.8)}:host([checked]:focus) .switch .state,:host([checked]:hover) .switch .state{background:hsla(var(--primary),.3)}:host([disabled]){pointer-events:none}:host([disabled]) .switch{background:hsla(var(--surface-container-highest),.12);border-color:hsla(var(--on-surface),.12)}:host([disabled]) .switch .state #knob{background:hsla(var(--on-surface),.38)}:host([disabled]) .label{opacity:.6}:host([disabled][checked]) .switch{background:hsla(var(--on-surface),.12);border:none}:host([disabled][checked]) .switch .state #knob{background:hsla(var(--surface),1)}";
|
|
3
3
|
|
|
4
4
|
export { css_248z as default, stylesheet };
|
package/tab-group/tab-group.d.ts
CHANGED
package/tab-group/tab-group.js
CHANGED
|
@@ -9,18 +9,12 @@ let TkTabGroup = class TkTabGroup extends LitElement {
|
|
|
9
9
|
<div class="tabs">
|
|
10
10
|
<slot @click=${(e) => this.clickOnTab(e.target)} @slotchange=${() => this.updateUnderline()}></slot>
|
|
11
11
|
</div>
|
|
12
|
-
|
|
13
|
-
? html `
|
|
14
|
-
<div class="circle"></div>
|
|
15
|
-
`
|
|
16
|
-
: html `
|
|
17
|
-
<div class="underline"></div>
|
|
18
|
-
`}
|
|
12
|
+
<div class="underline"></div>
|
|
19
13
|
`;
|
|
20
14
|
}
|
|
21
15
|
constructor() {
|
|
22
16
|
super();
|
|
23
|
-
this.
|
|
17
|
+
this.secondary = false;
|
|
24
18
|
this.observe = "";
|
|
25
19
|
this.selected = "";
|
|
26
20
|
}
|
|
@@ -54,13 +48,8 @@ let TkTabGroup = class TkTabGroup extends LitElement {
|
|
|
54
48
|
const selected = this.querySelector("[selected]");
|
|
55
49
|
if (selected) {
|
|
56
50
|
setTimeout(() => {
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
}
|
|
60
|
-
else {
|
|
61
|
-
this.$underline.style.width = selected.clientWidth + "px";
|
|
62
|
-
this.$underline.style.transform = `translateX(${selected.offsetLeft}px)`;
|
|
63
|
-
}
|
|
51
|
+
this.$underline.style.width = selected.clientWidth + "px";
|
|
52
|
+
this.$underline.style.transform = `translateX(${selected.offsetLeft}px)`;
|
|
64
53
|
});
|
|
65
54
|
}
|
|
66
55
|
}
|
|
@@ -70,7 +59,7 @@ TkTabGroup.styles = css `
|
|
|
70
59
|
`;
|
|
71
60
|
__decorate([
|
|
72
61
|
property({ attribute: true, type: Boolean })
|
|
73
|
-
], TkTabGroup.prototype, "
|
|
62
|
+
], TkTabGroup.prototype, "secondary", void 0);
|
|
74
63
|
__decorate([
|
|
75
64
|
property({ attribute: true, type: String })
|
|
76
65
|
], TkTabGroup.prototype, "observe", void 0);
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var css_248z = "*{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:transparent;box-sizing:border-box}:host{
|
|
2
|
-
var stylesheet="*{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:transparent;box-sizing:border-box}:host{
|
|
1
|
+
var css_248z = "*{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:transparent;box-sizing:border-box}:host{display:inline-block;overflow-x:hidden;position:relative}:host([overflow]){overflow-x:auto}.tabs{display:flex}:host(:not([circle])) .tabs{border-bottom:2px solid hsl(var(--primary-container))}.underline{height:2px;margin-top:-2px;transition:transform .2s ease;width:0;will-change:transform}.circle,.underline{background-color:hsl(var(--primary))}.circle{border-radius:var(--border-radius-circle,50%);height:8px;transition:transform .3s ease;width:8px}";
|
|
2
|
+
var stylesheet="*{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:transparent;box-sizing:border-box}:host{display:inline-block;overflow-x:hidden;position:relative}:host([overflow]){overflow-x:auto}.tabs{display:flex}:host(:not([circle])) .tabs{border-bottom:2px solid hsl(var(--primary-container))}.underline{height:2px;margin-top:-2px;transition:transform .2s ease;width:0;will-change:transform}.circle,.underline{background-color:hsl(var(--primary))}.circle{border-radius:var(--border-radius-circle,50%);height:8px;transition:transform .3s ease;width:8px}";
|
|
3
3
|
|
|
4
4
|
export { css_248z as default, stylesheet };
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var css_248z = "*{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:transparent;box-sizing:border-box}:host{
|
|
2
|
-
var stylesheet="*{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:transparent;box-sizing:border-box}:host{
|
|
1
|
+
var css_248z = "*{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:transparent;box-sizing:border-box}:host{display:block;outline:none;transform:translateZ(0)}:host #container{align-items:center;background-color:hsla(var(--surface-container-highest),.5);border-bottom:1px solid hsl(var(--on-surface-variant));border-radius:4px 4px 0 0;color:hsl(var(--on-surface));display:flex;font-size:var(--input-font-size,1rem);height:56px;overflow:hidden;padding:8px 16px;position:relative;transition:var(--input-transition,border-color var(--transition-duration-medium,.18s) var(--transition-timing-function-ease,ease),background var(--transition-duration-medium,.18s) var(--transition-timing-function-ease,ease))}:host #wrapper{flex-grow:1;position:relative}:host #label{color:hsl(var(--on-surface-variant));font-size:inherit;font-weight:400;line-height:64px;line-height:1;pointer-events:none;position:absolute;top:50%;transform:translateY(-50%);transition:var(--input-label-transition,top var(--transition-duration-fast,.12s) var(--transition-timing-function-linear,linear),font-size var(--transition-duration-fast,.12s) var(--transition-timing-function-linear,linear),transform var(--transition-duration-fast,.12s) var(--transition-timing-function-linear,linear));-webkit-user-select:none;user-select:none;white-space:nowrap;z-index:1}:host([disabled]){opacity:.38;pointer-events:none}:host(:hover) #container{background-color:hsla(var(--surface-container-highest),.5);border-bottom:1px solid hsl(var(--on-surface));border-radius:4px 4px 0 0;color:hsl(var(--on-surface));font-size:var(--input-font-size,1rem)}:host(:focus-within) #container{background-color:hsla(var(--on-surface),.3);border-bottom:2px solid hsl(var(--primary));padding:8px 16px 7px}:host([outlined]) #container{background-color:initial;border:1px solid hsl(var(--outline));border-radius:4px}:host([outlined]:focus-within) #container{border:2px solid hsl(var(--primary));padding:7px 15px}:host(:focus-within) #label,:host([dirty]) #label,:host([type=color]) #label,:host([type=date]) #label,:host([type=file]) #label,:host([type=range]) #label{color:hsl(var(--primary));font-size:var(--input-label-font-size,.75rem);top:0;transform:translateY(0)}#slot-wrapper,::slotted(input),::slotted(select),::slotted(textarea){-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:transparent;-webkit-text-fill-color:var(--_input-color);-webkit-overflow-scrolling:touch;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#0000;border:none;box-sizing:border-box;caret-color:hsl(var(--primary));color:inherit;display:block;font-size:var(--input-font-size,1rem);margin:0;outline:none;padding:var(--input-padding-top-bottom,.5rem) var(--_input-padding-left-right);position:relative;text-align:var(--input-text-align,inherit);width:100%}:host([label]) #slot-wrapper,:host([label]) ::slotted(input),:host([label]) ::slotted(select),:host([label]) ::slotted(textarea){padding-top:16px}:host([invalid]){color:hsl(var(--error))}::slotted(input[type=color]){cursor:pointer;height:3.75rem}::slotted([slot=after]),::slotted([slot=before]){color:var(--input-before-after-color,hsl(var(--shadow)))}:host(:not([outlined]):not([filled])) ::slotted([slot=before]){margin-right:var(--input-padding-left-right-outlined,.75rem)}:host(:not([outlined]):not([filled])) ::slotted([slot=after]),:host([filled]) ::slotted([slot=before]),:host([outlined]) ::slotted([slot=before]){margin-left:var(--input-padding-left-right-outlined,.75rem)}:host([filled]) ::slotted([slot=after]),:host([outlined]) ::slotted([slot=after]){margin-right:var(--input-padding-left-right-outlined,.75rem)}:host #container{height:auto;min-height:56px}#wrapper ::slotted(textarea){font-family:inherit;height:var(--textarea-height,var(--_textarea-height));max-height:var(--textarea-max-height);min-height:var(--textarea-min-height,var(--textarea-height,var(--_textarea-height)));resize:var(--textarea-resize,none)}:host(:focus) ::slotted(textarea),:host(:hover) ::slotted(textarea){will-change:height}";
|
|
2
|
+
var stylesheet="*{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:transparent;box-sizing:border-box}:host{display:block;outline:none;transform:translateZ(0)}:host #container{align-items:center;background-color:hsla(var(--surface-container-highest),.5);border-bottom:1px solid hsl(var(--on-surface-variant));border-radius:4px 4px 0 0;color:hsl(var(--on-surface));display:flex;font-size:var(--input-font-size,1rem);height:56px;overflow:hidden;padding:8px 16px;position:relative;transition:var(--input-transition,border-color var(--transition-duration-medium,.18s) var(--transition-timing-function-ease,ease),background var(--transition-duration-medium,.18s) var(--transition-timing-function-ease,ease))}:host #wrapper{flex-grow:1;position:relative}:host #label{color:hsl(var(--on-surface-variant));font-size:inherit;font-weight:400;line-height:64px;line-height:1;pointer-events:none;position:absolute;top:50%;transform:translateY(-50%);transition:var(--input-label-transition,top var(--transition-duration-fast,.12s) var(--transition-timing-function-linear,linear),font-size var(--transition-duration-fast,.12s) var(--transition-timing-function-linear,linear),transform var(--transition-duration-fast,.12s) var(--transition-timing-function-linear,linear));-webkit-user-select:none;user-select:none;white-space:nowrap;z-index:1}:host([disabled]){opacity:.38;pointer-events:none}:host(:hover) #container{background-color:hsla(var(--surface-container-highest),.5);border-bottom:1px solid hsl(var(--on-surface));border-radius:4px 4px 0 0;color:hsl(var(--on-surface));font-size:var(--input-font-size,1rem)}:host(:focus-within) #container{background-color:hsla(var(--on-surface),.3);border-bottom:2px solid hsl(var(--primary));padding:8px 16px 7px}:host([outlined]) #container{background-color:initial;border:1px solid hsl(var(--outline));border-radius:4px}:host([outlined]:focus-within) #container{border:2px solid hsl(var(--primary));padding:7px 15px}:host(:focus-within) #label,:host([dirty]) #label,:host([type=color]) #label,:host([type=date]) #label,:host([type=file]) #label,:host([type=range]) #label{color:hsl(var(--primary));font-size:var(--input-label-font-size,.75rem);top:0;transform:translateY(0)}#slot-wrapper,::slotted(input),::slotted(select),::slotted(textarea){-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:transparent;-webkit-text-fill-color:var(--_input-color);-webkit-overflow-scrolling:touch;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#0000;border:none;box-sizing:border-box;caret-color:hsl(var(--primary));color:inherit;display:block;font-size:var(--input-font-size,1rem);margin:0;outline:none;padding:var(--input-padding-top-bottom,.5rem) var(--_input-padding-left-right);position:relative;text-align:var(--input-text-align,inherit);width:100%}:host([label]) #slot-wrapper,:host([label]) ::slotted(input),:host([label]) ::slotted(select),:host([label]) ::slotted(textarea){padding-top:16px}:host([invalid]){color:hsl(var(--error))}::slotted(input[type=color]){cursor:pointer;height:3.75rem}::slotted([slot=after]),::slotted([slot=before]){color:var(--input-before-after-color,hsl(var(--shadow)))}:host(:not([outlined]):not([filled])) ::slotted([slot=before]){margin-right:var(--input-padding-left-right-outlined,.75rem)}:host(:not([outlined]):not([filled])) ::slotted([slot=after]),:host([filled]) ::slotted([slot=before]),:host([outlined]) ::slotted([slot=before]){margin-left:var(--input-padding-left-right-outlined,.75rem)}:host([filled]) ::slotted([slot=after]),:host([outlined]) ::slotted([slot=after]){margin-right:var(--input-padding-left-right-outlined,.75rem)}:host #container{height:auto;min-height:56px}#wrapper ::slotted(textarea){font-family:inherit;height:var(--textarea-height,var(--_textarea-height));max-height:var(--textarea-max-height);min-height:var(--textarea-min-height,var(--textarea-height,var(--_textarea-height)));resize:var(--textarea-resize,none)}:host(:focus) ::slotted(textarea),:host(:hover) ::slotted(textarea){will-change:height}";
|
|
3
3
|
|
|
4
4
|
export { css_248z as default, stylesheet };
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var css_248z = "*{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:transparent;box-sizing:border-box}:host{
|
|
2
|
-
var stylesheet="*{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:transparent;box-sizing:border-box}:host{
|
|
1
|
+
var css_248z = "*{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:transparent;box-sizing:border-box}:host{display:block;outline:none;transform:translateZ(0)}:host #container{align-items:center;background-color:hsla(var(--surface-container-highest),.5);border-bottom:1px solid hsl(var(--on-surface-variant));border-radius:4px 4px 0 0;color:hsl(var(--on-surface));display:flex;font-size:var(--input-font-size,1rem);height:56px;overflow:hidden;padding:8px 16px;position:relative;transition:var(--input-transition,border-color var(--transition-duration-medium,.18s) var(--transition-timing-function-ease,ease),background var(--transition-duration-medium,.18s) var(--transition-timing-function-ease,ease))}:host #wrapper{flex-grow:1;position:relative}:host #label{color:hsl(var(--on-surface-variant));font-size:inherit;font-weight:400;line-height:64px;line-height:1;pointer-events:none;position:absolute;top:50%;transform:translateY(-50%);transition:var(--input-label-transition,top var(--transition-duration-fast,.12s) var(--transition-timing-function-linear,linear),font-size var(--transition-duration-fast,.12s) var(--transition-timing-function-linear,linear),transform var(--transition-duration-fast,.12s) var(--transition-timing-function-linear,linear));-webkit-user-select:none;user-select:none;white-space:nowrap;z-index:1}:host([disabled]){opacity:.38;pointer-events:none}:host(:hover) #container{background-color:hsla(var(--surface-container-highest),.5);border-bottom:1px solid hsl(var(--on-surface));border-radius:4px 4px 0 0;color:hsl(var(--on-surface));font-size:var(--input-font-size,1rem)}:host(:focus-within) #container{background-color:hsla(var(--on-surface),.3);border-bottom:2px solid hsl(var(--primary));padding:8px 16px 7px}:host([outlined]) #container{background-color:initial;border:1px solid hsl(var(--outline));border-radius:4px}:host([outlined]:focus-within) #container{border:2px solid hsl(var(--primary));padding:7px 15px}:host(:focus-within) #label,:host([dirty]) #label,:host([type=color]) #label,:host([type=date]) #label,:host([type=file]) #label,:host([type=range]) #label{color:hsl(var(--primary));font-size:var(--input-label-font-size,.75rem);top:0;transform:translateY(0)}#slot-wrapper,::slotted(input),::slotted(select),::slotted(textarea){-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:transparent;-webkit-text-fill-color:var(--_input-color);-webkit-overflow-scrolling:touch;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#0000;border:none;box-sizing:border-box;caret-color:hsl(var(--primary));color:inherit;display:block;font-size:var(--input-font-size,1rem);margin:0;outline:none;padding:var(--input-padding-top-bottom,.5rem) var(--_input-padding-left-right);position:relative;text-align:var(--input-text-align,inherit);width:100%}:host([label]) #slot-wrapper,:host([label]) ::slotted(input),:host([label]) ::slotted(select),:host([label]) ::slotted(textarea){padding-top:16px}:host([invalid]){color:hsl(var(--error))}::slotted(input[type=color]){cursor:pointer;height:3.75rem}::slotted([slot=after]),::slotted([slot=before]){color:var(--input-before-after-color,hsl(var(--shadow)))}:host(:not([outlined]):not([filled])) ::slotted([slot=before]){margin-right:var(--input-padding-left-right-outlined,.75rem)}:host(:not([outlined]):not([filled])) ::slotted([slot=after]),:host([filled]) ::slotted([slot=before]),:host([outlined]) ::slotted([slot=before]){margin-left:var(--input-padding-left-right-outlined,.75rem)}:host([filled]) ::slotted([slot=after]),:host([outlined]) ::slotted([slot=after]){margin-right:var(--input-padding-left-right-outlined,.75rem)}";
|
|
2
|
+
var stylesheet="*{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:transparent;box-sizing:border-box}:host{display:block;outline:none;transform:translateZ(0)}:host #container{align-items:center;background-color:hsla(var(--surface-container-highest),.5);border-bottom:1px solid hsl(var(--on-surface-variant));border-radius:4px 4px 0 0;color:hsl(var(--on-surface));display:flex;font-size:var(--input-font-size,1rem);height:56px;overflow:hidden;padding:8px 16px;position:relative;transition:var(--input-transition,border-color var(--transition-duration-medium,.18s) var(--transition-timing-function-ease,ease),background var(--transition-duration-medium,.18s) var(--transition-timing-function-ease,ease))}:host #wrapper{flex-grow:1;position:relative}:host #label{color:hsl(var(--on-surface-variant));font-size:inherit;font-weight:400;line-height:64px;line-height:1;pointer-events:none;position:absolute;top:50%;transform:translateY(-50%);transition:var(--input-label-transition,top var(--transition-duration-fast,.12s) var(--transition-timing-function-linear,linear),font-size var(--transition-duration-fast,.12s) var(--transition-timing-function-linear,linear),transform var(--transition-duration-fast,.12s) var(--transition-timing-function-linear,linear));-webkit-user-select:none;user-select:none;white-space:nowrap;z-index:1}:host([disabled]){opacity:.38;pointer-events:none}:host(:hover) #container{background-color:hsla(var(--surface-container-highest),.5);border-bottom:1px solid hsl(var(--on-surface));border-radius:4px 4px 0 0;color:hsl(var(--on-surface));font-size:var(--input-font-size,1rem)}:host(:focus-within) #container{background-color:hsla(var(--on-surface),.3);border-bottom:2px solid hsl(var(--primary));padding:8px 16px 7px}:host([outlined]) #container{background-color:initial;border:1px solid hsl(var(--outline));border-radius:4px}:host([outlined]:focus-within) #container{border:2px solid hsl(var(--primary));padding:7px 15px}:host(:focus-within) #label,:host([dirty]) #label,:host([type=color]) #label,:host([type=date]) #label,:host([type=file]) #label,:host([type=range]) #label{color:hsl(var(--primary));font-size:var(--input-label-font-size,.75rem);top:0;transform:translateY(0)}#slot-wrapper,::slotted(input),::slotted(select),::slotted(textarea){-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:transparent;-webkit-text-fill-color:var(--_input-color);-webkit-overflow-scrolling:touch;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#0000;border:none;box-sizing:border-box;caret-color:hsl(var(--primary));color:inherit;display:block;font-size:var(--input-font-size,1rem);margin:0;outline:none;padding:var(--input-padding-top-bottom,.5rem) var(--_input-padding-left-right);position:relative;text-align:var(--input-text-align,inherit);width:100%}:host([label]) #slot-wrapper,:host([label]) ::slotted(input),:host([label]) ::slotted(select),:host([label]) ::slotted(textarea){padding-top:16px}:host([invalid]){color:hsl(var(--error))}::slotted(input[type=color]){cursor:pointer;height:3.75rem}::slotted([slot=after]),::slotted([slot=before]){color:var(--input-before-after-color,hsl(var(--shadow)))}:host(:not([outlined]):not([filled])) ::slotted([slot=before]){margin-right:var(--input-padding-left-right-outlined,.75rem)}:host(:not([outlined]):not([filled])) ::slotted([slot=after]),:host([filled]) ::slotted([slot=before]),:host([outlined]) ::slotted([slot=before]){margin-left:var(--input-padding-left-right-outlined,.75rem)}:host([filled]) ::slotted([slot=after]),:host([outlined]) ::slotted([slot=after]){margin-right:var(--input-padding-left-right-outlined,.75rem)}";
|
|
3
3
|
|
|
4
4
|
export { css_248z as default, stylesheet };
|
package/theme/theme.d.ts
CHANGED
|
@@ -1,29 +1,24 @@
|
|
|
1
|
-
import { LitElement } from "lit";
|
|
1
|
+
import { LitElement, PropertyValueMap } from "lit";
|
|
2
2
|
declare class TkTheme extends LitElement {
|
|
3
3
|
static styles: import("lit").CSSResult;
|
|
4
4
|
primary: string;
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
onAccent: string;
|
|
8
|
-
shade: string;
|
|
9
|
-
onShade: string;
|
|
5
|
+
secondary: string;
|
|
6
|
+
tertiary: string;
|
|
10
7
|
error: string;
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
background: string;
|
|
8
|
+
neutral: string;
|
|
9
|
+
neutralVariant: string;
|
|
14
10
|
forceBody: boolean;
|
|
15
11
|
inverted: boolean;
|
|
12
|
+
private primary_hsl;
|
|
13
|
+
private secondary_hsl;
|
|
14
|
+
private tertiary_hsl;
|
|
15
|
+
private error_hsl;
|
|
16
|
+
private neutral_hsl;
|
|
17
|
+
private neutral_variant_hsl;
|
|
16
18
|
render(): import("lit-html").TemplateResult<1>;
|
|
17
|
-
|
|
18
|
-
connectedCallback(): void;
|
|
19
|
-
disconnectedCallback(): void;
|
|
20
|
-
private setTheme;
|
|
21
|
-
private setThemeFontSize;
|
|
22
|
-
turnThemeToInverted(): void;
|
|
23
|
-
turnThemeToNonInverted(): void;
|
|
19
|
+
protected firstUpdated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
|
|
24
20
|
private hexToHSL;
|
|
25
21
|
private setThemeColor;
|
|
26
|
-
private setBodyStyle;
|
|
27
22
|
}
|
|
28
23
|
declare global {
|
|
29
24
|
interface HTMLElementTagNameMap {
|
package/theme/theme.js
CHANGED
|
@@ -1,21 +1,17 @@
|
|
|
1
1
|
import { __decorate } from 'tslib';
|
|
2
2
|
import { LitElement, html, css, unsafeCSS } from 'lit';
|
|
3
|
-
import { property, customElement } from 'lit/decorators.js';
|
|
3
|
+
import { property, state, customElement } from 'lit/decorators.js';
|
|
4
4
|
import css_248z from './theme.scss.js';
|
|
5
5
|
|
|
6
6
|
let TkTheme = class TkTheme extends LitElement {
|
|
7
7
|
constructor() {
|
|
8
8
|
super(...arguments);
|
|
9
|
-
this.primary = "#
|
|
10
|
-
this.
|
|
11
|
-
this.
|
|
12
|
-
this.
|
|
13
|
-
this.
|
|
14
|
-
this.
|
|
15
|
-
this.error = "#F44336";
|
|
16
|
-
this.onError = "#FFFFFF";
|
|
17
|
-
this.foreground = "#FFFFFF";
|
|
18
|
-
this.background = "#000";
|
|
9
|
+
this.primary = "#62519f";
|
|
10
|
+
this.secondary = "#625B71";
|
|
11
|
+
this.tertiary = "#7D5260";
|
|
12
|
+
this.error = "#B3261E";
|
|
13
|
+
this.neutral = "#5E5F5C";
|
|
14
|
+
this.neutralVariant = "#5c6057";
|
|
19
15
|
this.forceBody = false;
|
|
20
16
|
this.inverted = false;
|
|
21
17
|
}
|
|
@@ -24,44 +20,9 @@ let TkTheme = class TkTheme extends LitElement {
|
|
|
24
20
|
<slot></slot>
|
|
25
21
|
`;
|
|
26
22
|
}
|
|
27
|
-
|
|
23
|
+
firstUpdated(_changedProperties) {
|
|
28
24
|
this.setThemeColor();
|
|
29
25
|
}
|
|
30
|
-
connectedCallback() {
|
|
31
|
-
super.connectedCallback();
|
|
32
|
-
this.addEventListener("turn-theme-to-inverted", () => this.turnThemeToInverted(), { passive: true });
|
|
33
|
-
this.addEventListener("turn-theme-to-non-inverted", () => this.turnThemeToNonInverted(), { passive: true });
|
|
34
|
-
this.addEventListener("set-theme", this.setTheme);
|
|
35
|
-
this.addEventListener("set-theme-font-size", this.setThemeFontSize);
|
|
36
|
-
}
|
|
37
|
-
disconnectedCallback() {
|
|
38
|
-
this.removeEventListener("turn-theme-to-inverted", this.turnThemeToInverted);
|
|
39
|
-
this.removeEventListener("turn-theme-to-non-inverted", this.turnThemeToNonInverted);
|
|
40
|
-
this.removeEventListener("set-theme", this.setTheme);
|
|
41
|
-
this.removeEventListener("set-theme-font-size", this.setThemeFontSize);
|
|
42
|
-
super.disconnectedCallback();
|
|
43
|
-
}
|
|
44
|
-
setTheme(e) {
|
|
45
|
-
const ev = e;
|
|
46
|
-
this.background = ev.detail.background ? ev.detail.background : this.background;
|
|
47
|
-
this.foreground = ev.detail.foreground ? ev.detail.foreground : this.foreground;
|
|
48
|
-
this.primary = ev.detail.primary ? ev.detail.primary : this.primary;
|
|
49
|
-
this.onPrimary = ev.detail.onPrimary ? ev.detail.onPrimary : this.onPrimary;
|
|
50
|
-
this.accent = ev.detail.accent ? ev.detail.accent : this.accent;
|
|
51
|
-
this.onAccent = ev.detail.onAccent ? ev.detail.onAccent : this.onAccent;
|
|
52
|
-
}
|
|
53
|
-
setThemeFontSize(e) {
|
|
54
|
-
const ev = e;
|
|
55
|
-
this.style.setProperty("--font-size", ev.detail);
|
|
56
|
-
}
|
|
57
|
-
turnThemeToInverted() {
|
|
58
|
-
this.inverted = true;
|
|
59
|
-
this.forceBody && this.setBodyStyle();
|
|
60
|
-
}
|
|
61
|
-
turnThemeToNonInverted() {
|
|
62
|
-
this.inverted = false;
|
|
63
|
-
this.forceBody && this.setBodyStyle();
|
|
64
|
-
}
|
|
65
26
|
hexToHSL(hex) {
|
|
66
27
|
const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})?$/i.exec(hex);
|
|
67
28
|
if (result == null)
|
|
@@ -92,53 +53,36 @@ let TkTheme = class TkTheme extends LitElement {
|
|
|
92
53
|
return [(h * 360).toString(), (s * 100).toString() + "%", (l * 100).toString() + "%"];
|
|
93
54
|
}
|
|
94
55
|
setThemeColor() {
|
|
95
|
-
|
|
96
|
-
this.
|
|
97
|
-
this.
|
|
98
|
-
this.
|
|
99
|
-
|
|
100
|
-
this.
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
this.style.setProperty("--on-error-s", on_error_hsl[1]);
|
|
126
|
-
this.style.setProperty("--on-error-l", on_error_hsl[2]);
|
|
127
|
-
const foreground = this.hexToHSL(this.foreground);
|
|
128
|
-
this.style.setProperty("--theme-foreground", `hsl(${foreground[0]},${foreground[1]},${foreground[2]})`);
|
|
129
|
-
const background = this.hexToHSL(this.background);
|
|
130
|
-
this.style.setProperty("--theme-background", `hsl(${background[0]},${background[1]},${background[2]})`);
|
|
131
|
-
this.forceBody && this.setBodyStyle();
|
|
132
|
-
}
|
|
133
|
-
setBodyStyle() {
|
|
134
|
-
let foreground = this.hexToHSL(this.foreground);
|
|
135
|
-
let background = this.hexToHSL(this.background);
|
|
136
|
-
if (this.inverted) {
|
|
137
|
-
foreground = this.hexToHSL(this.background);
|
|
138
|
-
background = this.hexToHSL(this.foreground);
|
|
139
|
-
}
|
|
140
|
-
document.body.style.setProperty("background", `hsl(${background[0]},${background[1]},${background[2]})`);
|
|
141
|
-
document.body.style.setProperty("color", `hsl(${foreground[0]},${foreground[1]},${foreground[2]})`);
|
|
56
|
+
this.primary_hsl = this.hexToHSL(this.primary);
|
|
57
|
+
this.secondary_hsl = this.hexToHSL(this.secondary);
|
|
58
|
+
this.tertiary_hsl = this.hexToHSL(this.tertiary);
|
|
59
|
+
this.error_hsl = this.hexToHSL(this.error);
|
|
60
|
+
this.neutral_hsl = this.hexToHSL(this.neutral);
|
|
61
|
+
this.neutral_variant_hsl = this.hexToHSL(this.neutralVariant);
|
|
62
|
+
const style = document.createElement("style");
|
|
63
|
+
style.innerHTML = `
|
|
64
|
+
:root {
|
|
65
|
+
--primary-h: ${this.primary_hsl[0]};
|
|
66
|
+
--primary-s: ${this.primary_hsl[1]};
|
|
67
|
+
--primary-l: ${this.primary_hsl[2]};
|
|
68
|
+
--secondary-h: ${this.secondary_hsl[0]};
|
|
69
|
+
--secondary-s: ${this.secondary_hsl[1]};
|
|
70
|
+
--secondary-l: ${this.secondary_hsl[2]};
|
|
71
|
+
--tertiary-h: ${this.tertiary_hsl[0]};
|
|
72
|
+
--tertiary-s: ${this.tertiary_hsl[1]};
|
|
73
|
+
--tertiary-l: ${this.tertiary_hsl[2]};
|
|
74
|
+
--error-h: ${this.error_hsl[0]};
|
|
75
|
+
--error-s: ${this.error_hsl[1]};
|
|
76
|
+
--error-l: ${this.error_hsl[2]};
|
|
77
|
+
--neutral-h: ${this.neutral_hsl[0]};
|
|
78
|
+
--neutral-s: ${this.neutral_hsl[1]};
|
|
79
|
+
--neutral-l: ${this.neutral_hsl[2]};
|
|
80
|
+
--neutral-variant-h: ${this.neutral_variant_hsl[0]};
|
|
81
|
+
--neutral-variant-s: ${this.neutral_variant_hsl[1]};
|
|
82
|
+
--neutral-variant-l: ${this.neutral_variant_hsl[2]};
|
|
83
|
+
}
|
|
84
|
+
`;
|
|
85
|
+
document.body.appendChild(style);
|
|
142
86
|
}
|
|
143
87
|
};
|
|
144
88
|
TkTheme.styles = css `
|
|
@@ -147,39 +91,45 @@ TkTheme.styles = css `
|
|
|
147
91
|
__decorate([
|
|
148
92
|
property()
|
|
149
93
|
], TkTheme.prototype, "primary", void 0);
|
|
150
|
-
__decorate([
|
|
151
|
-
property({ attribute: "on-primary" })
|
|
152
|
-
], TkTheme.prototype, "onPrimary", void 0);
|
|
153
94
|
__decorate([
|
|
154
95
|
property()
|
|
155
|
-
], TkTheme.prototype, "
|
|
156
|
-
__decorate([
|
|
157
|
-
property({ attribute: "on-accent" })
|
|
158
|
-
], TkTheme.prototype, "onAccent", void 0);
|
|
159
|
-
__decorate([
|
|
160
|
-
property()
|
|
161
|
-
], TkTheme.prototype, "shade", void 0);
|
|
96
|
+
], TkTheme.prototype, "secondary", void 0);
|
|
162
97
|
__decorate([
|
|
163
98
|
property()
|
|
164
|
-
], TkTheme.prototype, "
|
|
99
|
+
], TkTheme.prototype, "tertiary", void 0);
|
|
165
100
|
__decorate([
|
|
166
101
|
property()
|
|
167
102
|
], TkTheme.prototype, "error", void 0);
|
|
168
103
|
__decorate([
|
|
169
104
|
property()
|
|
170
|
-
], TkTheme.prototype, "
|
|
105
|
+
], TkTheme.prototype, "neutral", void 0);
|
|
171
106
|
__decorate([
|
|
172
107
|
property()
|
|
173
|
-
], TkTheme.prototype, "
|
|
174
|
-
__decorate([
|
|
175
|
-
property()
|
|
176
|
-
], TkTheme.prototype, "background", void 0);
|
|
108
|
+
], TkTheme.prototype, "neutralVariant", void 0);
|
|
177
109
|
__decorate([
|
|
178
110
|
property({ type: Boolean, attribute: "force-body", reflect: true })
|
|
179
111
|
], TkTheme.prototype, "forceBody", void 0);
|
|
180
112
|
__decorate([
|
|
181
113
|
property({ type: Boolean, attribute: true, reflect: true })
|
|
182
114
|
], TkTheme.prototype, "inverted", void 0);
|
|
115
|
+
__decorate([
|
|
116
|
+
state()
|
|
117
|
+
], TkTheme.prototype, "primary_hsl", void 0);
|
|
118
|
+
__decorate([
|
|
119
|
+
state()
|
|
120
|
+
], TkTheme.prototype, "secondary_hsl", void 0);
|
|
121
|
+
__decorate([
|
|
122
|
+
state()
|
|
123
|
+
], TkTheme.prototype, "tertiary_hsl", void 0);
|
|
124
|
+
__decorate([
|
|
125
|
+
state()
|
|
126
|
+
], TkTheme.prototype, "error_hsl", void 0);
|
|
127
|
+
__decorate([
|
|
128
|
+
state()
|
|
129
|
+
], TkTheme.prototype, "neutral_hsl", void 0);
|
|
130
|
+
__decorate([
|
|
131
|
+
state()
|
|
132
|
+
], TkTheme.prototype, "neutral_variant_hsl", void 0);
|
|
183
133
|
TkTheme = __decorate([
|
|
184
134
|
customElement("tk-theme")
|
|
185
135
|
], TkTheme);
|