@jsekulowicz/ds-components 0.3.1 → 0.4.0

package/dist/atoms/select/select.styles.js

@@ -1,134 +1,22 @@
 import { css } from 'lit';
 export const selectStyles = css `
-  :host {
-    display: inline-flex;
-    flex-direction: column;
-    gap: var(--ds-space-1);
-    width: 100%;
-  }
-  .control-wrap {
-    position: relative;
-    width: 100%;
-  }
   .trigger {
-    display: flex;
-    align-items: center;
-    width: 100%;
-    height: var(--ds-size-md);
-    background: var(--ds-color-bg);
-    border: 1px solid var(--ds-color-border-strong);
-    border-radius: var(--ds-radius-sm);
-    padding: 0 var(--ds-space-3);
     cursor: pointer;
     text-align: left;
     font-family: var(--ds-font-body);
     font-size: var(--ds-font-size-sm);
     color: var(--ds-color-fg);
-    transition:
-      border-color var(--ds-duration-fast) var(--ds-easing-standard),
-      box-shadow var(--ds-duration-fast) var(--ds-easing-standard);
-  }
-  .trigger:hover {
-    border-color: var(--ds-color-fg-subtle);
   }
   .trigger:focus-visible {
     border-color: var(--ds-color-accent);
     box-shadow: var(--ds-shadow-focus);
-    outline: none;
   }
   .trigger[aria-expanded='true'] {
     border-color: var(--ds-color-accent);
     box-shadow: var(--ds-shadow-focus);
   }
-  :host([invalid]) .trigger {
-    border-color: var(--ds-color-danger);
-    background: var(--ds-color-danger-subtle);
-  }
-  :host([invalid]) .trigger:focus-visible {
-    box-shadow: 0 0 0 3px rgba(178, 26, 10, 0.3);
-  }
-  :host([disabled]) .trigger {
-    opacity: 0.5;
-    background: var(--ds-color-bg-subtle);
-    cursor: not-allowed;
-    pointer-events: none;
-  }
-  .trigger-multiple {
-    height: auto;
-    min-height: var(--ds-size-md);
-    padding: 6px var(--ds-space-3);
-    flex-wrap: wrap;
-    align-items: center;
-    gap: var(--ds-space-1);
-    overflow: visible;
-  }
   .tiles {
-    display: flex;
-    flex-wrap: wrap;
-    gap: var(--ds-space-1);
     flex: 1;
-    min-width: 0;
-  }
-  .tile {
-    display: inline-flex;
-    align-items: center;
-    gap: var(--ds-space-1);
-    height: 24px;
-    padding: 0 var(--ds-space-1) 0 var(--ds-space-2);
-    background: var(--ds-color-bg-subtle);
-    border: 1px solid var(--ds-color-border);
-    border-radius: var(--ds-radius-xs);
-    font-size: var(--ds-font-size-xs);
-    color: var(--ds-color-fg);
-    white-space: nowrap;
-  }
-  .tile-focused {
-    border-color: var(--ds-color-accent);
-    box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--ds-color-accent) 35%, transparent);
-  }
-  .tile-overflow {
-    background: var(--ds-color-accent-subtle);
-    border-color: var(--ds-color-accent);
-    color: var(--ds-color-accent);
-    padding: 0 var(--ds-space-2);
-    font-weight: var(--ds-font-weight-medium);
-  }
-  .tile-label {
-    max-width: 120px;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-  .tile-remove {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    width: 14px;
-    height: 14px;
-    padding: 0;
-    border: none;
-    background: none;
-    color: var(--ds-color-fg-muted);
-    cursor: pointer;
-    border-radius: var(--ds-radius-xs);
-    flex-shrink: 0;
-  }
-  .tile-remove:hover {
-    color: var(--ds-color-fg);
-    background: var(--ds-color-border);
-  }
-  .tile-remove svg {
-    width: 10px;
-    height: 10px;
-  }
-  .leading {
-    display: inline-flex;
-    align-items: center;
-    color: var(--ds-color-fg-muted);
-    margin-right: var(--ds-space-1);
-    flex-shrink: 0;
-  }
-  .leading[hidden] {
-    display: none;
   }
   .trigger-label {
     flex: 1;
@@ -139,55 +27,8 @@ export const selectStyles = css `
   .trigger-label.placeholder {
     color: var(--ds-color-fg-muted);
   }
-  .clear-btn {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    width: 1.2rem;
-    height: 1.2rem;
-    padding: 0;
-    border: none;
-    background: none;
-    color: var(--ds-color-fg-muted);
-    cursor: pointer;
-    border-radius: var(--ds-radius-xs);
-    flex-shrink: 0;
-  }
-  .clear-btn:hover {
-    color: var(--ds-color-fg);
-  }
-  .clear-btn:focus-visible {
-    outline: none;
-    box-shadow: var(--ds-shadow-focus);
-  }
-  .clear-btn svg {
-    width: 1rem;
-    height: 1rem;
-  }
-  .caret {
-    pointer-events: none;
-    width: 1.2rem;
-    height: 1.2rem;
-    margin-left: var(--ds-space-2);
-    color: var(--ds-color-fg-muted);
-    flex-shrink: 0;
-    transition: transform var(--ds-duration-fast) var(--ds-easing-standard);
-  }
   .trigger[aria-expanded='true'] .caret {
     transform: rotate(180deg);
   }
-  .listbox {
-    position: absolute;
-    top: calc(100% + var(--ds-space-1));
-    left: 0;
-    right: 0;
-    background: var(--ds-color-bg);
-    border: 1px solid var(--ds-color-border-strong);
-    border-radius: var(--ds-radius-sm);
-    box-shadow: var(--ds-shadow-md);
-    z-index: 100;
-    max-height: 240px;
-    overflow-y: auto;
-  }
 `;
 //# sourceMappingURL=select.styles.js.map

package/dist/atoms/select/select.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"select.styles.js","sourceRoot":"","sources":["../../../src/atoms/select/select.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,YAAY,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8L9B,CAAC"}
+{"version":3,"file":"select.styles.js","sourceRoot":"","sources":["../../../src/atoms/select/select.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,YAAY,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+B9B,CAAC"}

package/dist/atoms/tabs/tab-panel.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tab-panel.styles.d.ts","sourceRoot":"","sources":["../../../src/atoms/tabs/tab-panel.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,cAAc,yBAY1B,CAAC"}
+{"version":3,"file":"tab-panel.styles.d.ts","sourceRoot":"","sources":["../../../src/atoms/tabs/tab-panel.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,cAAc,yBAQ1B,CAAC"}

package/dist/atoms/tabs/tab-panel.styles.js

@@ -2,14 +2,10 @@ import { css } from 'lit';
 export const tabPanelStyles = css `
   :host {
     display: block;
-    outline: none;
   }
   :host(:focus-visible) {
     border-radius: var(--ds-radius-sm);
     box-shadow: var(--ds-shadow-focus);
   }
-  :host([hidden]) {
-    display: none;
-  }
 `;
 //# sourceMappingURL=tab-panel.styles.js.map

package/dist/atoms/tabs/tab-panel.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"tab-panel.styles.js","sourceRoot":"","sources":["../../../src/atoms/tabs/tab-panel.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,cAAc,GAAG,GAAG,CAAA;;;;;;;;;;;;CAYhC,CAAC"}
+{"version":3,"file":"tab-panel.styles.js","sourceRoot":"","sources":["../../../src/atoms/tabs/tab-panel.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,cAAc,GAAG,GAAG,CAAA;;;;;;;;CAQhC,CAAC"}

package/dist/atoms/tabs/tab.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tab.styles.d.ts","sourceRoot":"","sources":["../../../src/atoms/tabs/tab.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,SAAS,yBAuCrB,CAAC"}
+{"version":3,"file":"tab.styles.d.ts","sourceRoot":"","sources":["../../../src/atoms/tabs/tab.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,SAAS,yBAsCrB,CAAC"}

package/dist/atoms/tabs/tab.styles.js

@@ -2,7 +2,6 @@ import { css } from 'lit';
 export const tabStyles = css `
   :host {
     display: inline-flex;
-    outline: none;
   }
   :host([disabled]) {
     cursor: not-allowed;

package/dist/atoms/tabs/tab.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"tab.styles.js","sourceRoot":"","sources":["../../../src/atoms/tabs/tab.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,SAAS,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuC3B,CAAC"}
+{"version":3,"file":"tab.styles.js","sourceRoot":"","sources":["../../../src/atoms/tabs/tab.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,SAAS,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsC3B,CAAC"}

package/dist/molecules/alert/alert.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"alert.styles.d.ts","sourceRoot":"","sources":["../../../src/molecules/alert/alert.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,WAAW,yBAiEvB,CAAC"}
+{"version":3,"file":"alert.styles.d.ts","sourceRoot":"","sources":["../../../src/molecules/alert/alert.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,WAAW,yBAgEvB,CAAC"}

package/dist/molecules/alert/alert.styles.js

@@ -55,7 +55,6 @@ export const alertStyles = css `
     border-radius: var(--ds-radius-xs);
   }
   .close:focus-visible {
-    outline: 2px solid transparent;
     box-shadow: var(--ds-shadow-focus);
   }
   .icon {

package/dist/molecules/alert/alert.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"alert.styles.js","sourceRoot":"","sources":["../../../src/molecules/alert/alert.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,WAAW,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiE7B,CAAC"}
+{"version":3,"file":"alert.styles.js","sourceRoot":"","sources":["../../../src/molecules/alert/alert.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,WAAW,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgE7B,CAAC"}

package/dist/molecules/bar-chart/bar-chart.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"bar-chart.styles.d.ts","sourceRoot":"","sources":["../../../src/molecules/bar-chart/bar-chart.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,cAAc,yBAkK1B,CAAC"}
+{"version":3,"file":"bar-chart.styles.d.ts","sourceRoot":"","sources":["../../../src/molecules/bar-chart/bar-chart.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,cAAc,yBAiK1B,CAAC"}

package/dist/molecules/bar-chart/bar-chart.styles.js

@@ -17,7 +17,6 @@ export const barChartStyles = css `
   }
 
   .frame:focus-visible {
-    outline: 2px solid transparent;
     box-shadow: var(--ds-shadow-focus);
   }
 

package/dist/molecules/bar-chart/bar-chart.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"bar-chart.styles.js","sourceRoot":"","sources":["../../../src/molecules/bar-chart/bar-chart.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,cAAc,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkKhC,CAAC"}
+{"version":3,"file":"bar-chart.styles.js","sourceRoot":"","sources":["../../../src/molecules/bar-chart/bar-chart.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,cAAc,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiKhC,CAAC"}

package/dist/molecules/card/card.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"card.styles.d.ts","sourceRoot":"","sources":["../../../src/molecules/card/card.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,UAAU,yBAwEtB,CAAC"}
+{"version":3,"file":"card.styles.d.ts","sourceRoot":"","sources":["../../../src/molecules/card/card.styles.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,UAAU,yBAiFtB,CAAC"}

package/dist/molecules/card/card.styles.js

@@ -1,4 +1,6 @@
-import { css } from 'lit';
+import { css, unsafeCSS } from 'lit';
+import { breakpoint } from '@jsekulowicz/ds-tokens';
+const belowTabletBreakpoint = unsafeCSS(`calc(${breakpoint.md} - 0.02px)`);
 export const cardStyles = css `
   :host {
     display: block;
@@ -50,6 +52,15 @@ export const cardStyles = css `
     flex-direction: column;
     gap: var(--ds-space-1);
   }
+  .actions {
+    display: flex;
+    justify-content: flex-start;
+  }
+  @media (max-width: ${belowTabletBreakpoint}) {
+    .actions {
+      justify-content: flex-end;
+    }
+  }
   [hidden] {
     display: none;
   }

package/dist/molecules/card/card.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"card.styles.js","sourceRoot":"","sources":["../../../src/molecules/card/card.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,UAAU,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwE5B,CAAC"}
+{"version":3,"file":"card.styles.js","sourceRoot":"","sources":["../../../src/molecules/card/card.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,KAAK,CAAC;AACrC,OAAO,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AAEpD,MAAM,qBAAqB,GAAG,SAAS,CAAC,QAAQ,UAAU,CAAC,EAAE,YAAY,CAAC,CAAC;AAE3E,MAAM,CAAC,MAAM,UAAU,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;uBAuDN,qBAAqB;;;;;;;;;;;;;;;;;;;;;;;;;;CA0B3C,CAAC"}

package/dist/molecules/color-picker/color-picker-swatch.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"color-picker-swatch.styles.d.ts","sourceRoot":"","sources":["../../../src/molecules/color-picker/color-picker-swatch.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,uBAAuB,yBAuCnC,CAAC"}
+{"version":3,"file":"color-picker-swatch.styles.d.ts","sourceRoot":"","sources":["../../../src/molecules/color-picker/color-picker-swatch.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,uBAAuB,yBAsCnC,CAAC"}

package/dist/molecules/color-picker/color-picker-swatch.styles.js

@@ -15,7 +15,6 @@ export const colorPickerSwatchStyles = css `
   }
 
   :host(:focus-visible) {
-    outline: none;
     box-shadow: var(--ds-shadow-focus);
   }
 

package/dist/molecules/color-picker/color-picker-swatch.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"color-picker-swatch.styles.js","sourceRoot":"","sources":["../../../src/molecules/color-picker/color-picker-swatch.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,uBAAuB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuCzC,CAAC"}
+{"version":3,"file":"color-picker-swatch.styles.js","sourceRoot":"","sources":["../../../src/molecules/color-picker/color-picker-swatch.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,uBAAuB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsCzC,CAAC"}

package/dist/molecules/color-picker/color-picker.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"color-picker.styles.d.ts","sourceRoot":"","sources":["../../../src/molecules/color-picker/color-picker.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,iBAAiB,yBA8K7B,CAAC"}
+{"version":3,"file":"color-picker.styles.d.ts","sourceRoot":"","sources":["../../../src/molecules/color-picker/color-picker.styles.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,iBAAiB,yBA8K7B,CAAC"}

package/dist/molecules/color-picker/color-picker.styles.js

@@ -1,4 +1,6 @@
-import { css } from 'lit';
+import { css, unsafeCSS } from 'lit';
+import { breakpoint } from '@jsekulowicz/ds-tokens';
+const belowMobileBreakpoint = unsafeCSS(`calc(${breakpoint.sm} - 0.02px)`);
 export const colorPickerStyles = css `
   :host {
     display: inline-flex;
@@ -164,7 +166,7 @@ export const colorPickerStyles = css `
     justify-content: flex-end;
     gap: var(--ds-space-2);
   }
-  @media (max-width: 480px) {
+  @media (max-width: ${belowMobileBreakpoint}) {
     .custom-row {
       grid-template-columns: 1fr;
       align-items: stretch;

package/dist/molecules/color-picker/color-picker.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"color-picker.styles.js","sourceRoot":"","sources":["../../../src/molecules/color-picker/color-picker.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,iBAAiB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8KnC,CAAC"}
+{"version":3,"file":"color-picker.styles.js","sourceRoot":"","sources":["../../../src/molecules/color-picker/color-picker.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,KAAK,CAAC;AACrC,OAAO,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AAEpD,MAAM,qBAAqB,GAAG,SAAS,CAAC,QAAQ,UAAU,CAAC,EAAE,YAAY,CAAC,CAAC;AAE3E,MAAM,CAAC,MAAM,iBAAiB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;uBAqKb,qBAAqB;;;;;;;;;CAS3C,CAAC"}

package/dist/molecules/color-picker/input-color.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"input-color.styles.d.ts","sourceRoot":"","sources":["../../../src/molecules/color-picker/input-color.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,gBAAgB,yBAiC5B,CAAC"}
+{"version":3,"file":"input-color.styles.d.ts","sourceRoot":"","sources":["../../../src/molecules/color-picker/input-color.styles.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,gBAAgB,yBAgC5B,CAAC"}

package/dist/molecules/color-picker/input-color.styles.js

@@ -1,4 +1,6 @@
-import { css } from 'lit';
+import { css, unsafeCSS } from 'lit';
+import { breakpoint } from '@jsekulowicz/ds-tokens';
+const belowMobileBreakpoint = unsafeCSS(`calc(${breakpoint.sm} - 0.02px)`);
 export const inputColorStyles = css `
   :host {
     display: inline-flex;
@@ -19,7 +21,6 @@ export const inputColorStyles = css `
   input:focus-visible {
     border-color: var(--ds-color-accent);
     box-shadow: var(--ds-shadow-focus);
-    outline: none;
   }
 
   :host([disabled]) input {
@@ -27,7 +28,7 @@ export const inputColorStyles = css `
     cursor: not-allowed;
   }
 
-  @media (max-width: 480px) {
+  @media (max-width: ${belowMobileBreakpoint}) {
     :host {
       width: 100%;
     }

package/dist/molecules/color-picker/input-color.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"input-color.styles.js","sourceRoot":"","sources":["../../../src/molecules/color-picker/input-color.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,gBAAgB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiClC,CAAC"}
+{"version":3,"file":"input-color.styles.js","sourceRoot":"","sources":["../../../src/molecules/color-picker/input-color.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,KAAK,CAAC;AACrC,OAAO,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AAEpD,MAAM,qBAAqB,GAAG,SAAS,CAAC,QAAQ,UAAU,CAAC,EAAE,YAAY,CAAC,CAAC;AAE3E,MAAM,CAAC,MAAM,gBAAgB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;uBA2BZ,qBAAqB;;;;;CAK3C,CAAC"}

package/dist/molecules/toast/toast.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"toast.styles.d.ts","sourceRoot":"","sources":["../../../src/molecules/toast/toast.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,WAAW,yBAqEvB,CAAC"}
+{"version":3,"file":"toast.styles.d.ts","sourceRoot":"","sources":["../../../src/molecules/toast/toast.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,WAAW,yBAoEvB,CAAC"}

package/dist/molecules/toast/toast.styles.js

@@ -65,7 +65,6 @@ export const toastStyles = css `
     border-radius: var(--ds-radius-xs);
   }
   .close:focus-visible {
-    outline: 2px solid transparent;
     box-shadow: var(--ds-shadow-focus);
   }
 `;

package/dist/molecules/toast/toast.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"toast.styles.js","sourceRoot":"","sources":["../../../src/molecules/toast/toast.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,WAAW,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqE7B,CAAC"}
+{"version":3,"file":"toast.styles.js","sourceRoot":"","sources":["../../../src/molecules/toast/toast.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,WAAW,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoE7B,CAAC"}

package/dist/organisms/footer/footer.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"footer.styles.d.ts","sourceRoot":"","sources":["../../../src/organisms/footer/footer.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,YAAY,yBAwCxB,CAAC"}
+{"version":3,"file":"footer.styles.d.ts","sourceRoot":"","sources":["../../../src/organisms/footer/footer.styles.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,YAAY,yBAwCxB,CAAC"}

package/dist/organisms/footer/footer.styles.js

@@ -1,4 +1,6 @@
-import { css } from 'lit';
+import { css, unsafeCSS } from 'lit';
+import { breakpoint } from '@jsekulowicz/ds-tokens';
+const mobileBreakpoint = unsafeCSS(breakpoint.sm);
 export const footerStyles = css `
   :host {
     display: block;
@@ -27,7 +29,7 @@ export const footerStyles = css `
   .end {
     justify-content: flex-end;
   }
-  @container (max-width: 480px) {
+  @container (max-width: ${mobileBreakpoint}) {
     footer {
       gap: var(--ds-space-2);
       padding: var(--ds-space-2) var(--ds-space-4);

package/dist/organisms/footer/footer.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"footer.styles.js","sourceRoot":"","sources":["../../../src/organisms/footer/footer.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,YAAY,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwC9B,CAAC"}
+{"version":3,"file":"footer.styles.js","sourceRoot":"","sources":["../../../src/organisms/footer/footer.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,KAAK,CAAC;AACrC,OAAO,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AAEpD,MAAM,gBAAgB,GAAG,SAAS,CAAC,UAAU,CAAC,EAAE,CAAC,CAAC;AAElD,MAAM,CAAC,MAAM,YAAY,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;2BA4BJ,gBAAgB;;;;;;;;;;;;CAY1C,CAAC"}

package/dist/organisms/form/form.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"form.styles.d.ts","sourceRoot":"","sources":["../../../src/organisms/form/form.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,UAAU,yBA+BtB,CAAC"}
+{"version":3,"file":"form.styles.d.ts","sourceRoot":"","sources":["../../../src/organisms/form/form.styles.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,UAAU,yBAoCtB,CAAC"}

package/dist/organisms/form/form.styles.js

@@ -1,4 +1,6 @@
-import { css } from 'lit';
+import { css, unsafeCSS } from 'lit';
+import { breakpoint } from '@jsekulowicz/ds-tokens';
+const belowTabletBreakpoint = unsafeCSS(`calc(${breakpoint.md} - 0.02px)`);
 export const formStyles = css `
   :host {
     display: block;
@@ -20,9 +22,14 @@ export const formStyles = css `
   .actions {
     display: flex;
     gap: var(--ds-space-3);
-    justify-content: flex-end;
+    justify-content: flex-start;
     margin-top: var(--ds-space-5);
   }
+  @media (max-width: ${belowTabletBreakpoint}) {
+    .actions {
+      justify-content: flex-end;
+    }
+  }
   .title {
     margin: 0 0 var(--ds-space-4);
     font-family: var(--ds-font-display);

package/dist/organisms/form/form.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"form.styles.js","sourceRoot":"","sources":["../../../src/organisms/form/form.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,UAAU,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+B5B,CAAC"}
+{"version":3,"file":"form.styles.js","sourceRoot":"","sources":["../../../src/organisms/form/form.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,KAAK,CAAC;AACrC,OAAO,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AAEpD,MAAM,qBAAqB,GAAG,SAAS,CAAC,QAAQ,UAAU,CAAC,EAAE,YAAY,CAAC,CAAC;AAE3E,MAAM,CAAC,MAAM,UAAU,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;uBAwBN,qBAAqB;;;;;;;;;;;;CAY3C,CAAC"}

package/dist/organisms/navbar/navbar.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"navbar.styles.d.ts","sourceRoot":"","sources":["../../../src/organisms/navbar/navbar.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,YAAY,yBAiFxB,CAAC"}
+{"version":3,"file":"navbar.styles.d.ts","sourceRoot":"","sources":["../../../src/organisms/navbar/navbar.styles.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,YAAY,yBA+ExB,CAAC"}

package/dist/organisms/navbar/navbar.styles.js

@@ -1,9 +1,10 @@
-import { css } from 'lit';
+import { css, unsafeCSS } from 'lit';
+import { breakpoint } from '@jsekulowicz/ds-tokens';
+const tabletBreakpoint = unsafeCSS(breakpoint.md);
 export const navbarStyles = css `
   :host {
     display: block;
     container-type: inline-size;
-    --_breakpoint: 640px;
   }
   nav {
     position: relative;
@@ -46,13 +47,12 @@ export const navbarStyles = css `
     padding: var(--ds-space-2);
   }
   .toggle:focus-visible {
-    outline: 2px solid transparent;
     box-shadow: var(--ds-shadow-focus);
   }
   .menu {
     display: contents;
   }
-  @container (max-width: 640px) {
+  @container (max-width: ${tabletBreakpoint}) {
     .links {
       justify-content: flex-end;
       flex: 0 0 auto;

package/dist/organisms/navbar/navbar.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"navbar.styles.js","sourceRoot":"","sources":["../../../src/organisms/navbar/navbar.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,YAAY,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiF9B,CAAC"}
+{"version":3,"file":"navbar.styles.js","sourceRoot":"","sources":["../../../src/organisms/navbar/navbar.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,KAAK,CAAC;AACrC,OAAO,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AAEpD,MAAM,gBAAgB,GAAG,SAAS,CAAC,UAAU,CAAC,EAAE,CAAC,CAAC;AAElD,MAAM,CAAC,MAAM,YAAY,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2BAmDJ,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4B1C,CAAC"}

package/dist/pages/settings-page/settings-page.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"settings-page.styles.d.ts","sourceRoot":"","sources":["../../../src/pages/settings-page/settings-page.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,kBAAkB,yBAqE9B,CAAC"}
+{"version":3,"file":"settings-page.styles.d.ts","sourceRoot":"","sources":["../../../src/pages/settings-page/settings-page.styles.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,kBAAkB,yBAqE9B,CAAC"}

package/dist/pages/settings-page/settings-page.styles.js

@@ -1,4 +1,6 @@
-import { css } from 'lit';
+import { css, unsafeCSS } from 'lit';
+import { breakpoint } from '@jsekulowicz/ds-tokens';
+const belowTabletBreakpoint = unsafeCSS(`calc(${breakpoint.md} - 0.02px)`);
 export const settingsPageStyles = css `
   :host {
     display: block;
@@ -33,7 +35,7 @@ export const settingsPageStyles = css `
     gap: var(--ds-space-10);
     padding: var(--ds-space-8) 0;
   }
-  @media (max-width: 768px) {
+  @media (max-width: ${belowTabletBreakpoint}) {
     .grid {
       grid-template-columns: 1fr;
       gap: var(--ds-space-6);

package/dist/pages/settings-page/settings-page.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"settings-page.styles.js","sourceRoot":"","sources":["../../../src/pages/settings-page/settings-page.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,kBAAkB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqEpC,CAAC"}
+{"version":3,"file":"settings-page.styles.js","sourceRoot":"","sources":["../../../src/pages/settings-page/settings-page.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,KAAK,CAAC;AACrC,OAAO,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AAEpD,MAAM,qBAAqB,GAAG,SAAS,CAAC,QAAQ,UAAU,CAAC,EAAE,YAAY,CAAC,CAAC;AAE3E,MAAM,CAAC,MAAM,kBAAkB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;uBAkCd,qBAAqB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmC3C,CAAC"}

package/dist/templates/page-shell/page-shell.d.ts

@@ -6,16 +6,15 @@ import '../../atoms/icon/icons/bars-3.js';
 import '../../atoms/icon/icons/x-mark.js';
 /**
  * @tag ds-page-shell
- * @summary Application frame: header + aside + main + footer with responsive collapse.
+ * @summary Application frame: header + aside + main + optional footer with responsive collapse.
  * @slot brand - Top-left brand/logo.
  * @slot header-actions - Top-right actions.
  * @slot aside - Side navigation. When empty, the aside column and hamburger toggle are not rendered.
  * @slot default - Main content.
  * @slot footer - Footer content.
- * @cssprop --ds-page-shell-max-width - Outer cap for the shell's content column. Header inner content,
- *   the aside + main row, and footer inner content all centre at this width and align vertically.
- *   Defaults to `90rem` (1440px). Header and footer chrome (border, sticky background) remain
- *   full-bleed.
+ * @cssprop --ds-page-shell-max-width - Outer cap for the shell's content column. Header inner
+ *   content and the aside + main row centre at this width and align vertically. Defaults to `90rem`
+ *   (1440px). Header chrome remains full-bleed.
  */
 export declare class DsPageShell extends DsElement {
     #private;

package/dist/templates/page-shell/page-shell.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"page-shell.d.ts","sourceRoot":"","sources":["../../../src/templates/page-shell/page-shell.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAEhD,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAEjD,OAAO,8BAA8B,CAAC;AACtC,OAAO,4BAA4B,CAAC;AACpC,OAAO,kCAAkC,CAAC;AAC1C,OAAO,kCAAkC,CAAC;AAE1C;;;;;;;;;;;;GAYG;AACH,qBAAa,WAAY,SAAQ,SAAS;;IACxC,OAAgB,MAAM,4BAA0C;IAEpD,KAAK,SAAM;IACgB,SAAS,SAAqB;IAC5D,OAAO,CAAC,cAAc,CAAS;IAC/B,OAAO,CAAC,SAAS,CAAS;IAC1B,OAAO,CAAC,UAAU,CAAS;IAG3B,iBAAiB,IAAI,IAAI;IAezB,oBAAoB,IAAI,IAAI;IAO5B,YAAY,IAAI,IAAI;IAyEpB,MAAM,IAAI,cAAc;CA0DlC"}
+{"version":3,"file":"page-shell.d.ts","sourceRoot":"","sources":["../../../src/templates/page-shell/page-shell.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAEhD,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAEjD,OAAO,8BAA8B,CAAC;AACtC,OAAO,4BAA4B,CAAC;AACpC,OAAO,kCAAkC,CAAC;AAC1C,OAAO,kCAAkC,CAAC;AAE1C;;;;;;;;;;;GAWG;AACH,qBAAa,WAAY,SAAQ,SAAS;;IACxC,OAAgB,MAAM,4BAA0C;IAEpD,KAAK,SAAM;IACgB,SAAS,SAAqB;IAC5D,OAAO,CAAC,cAAc,CAAS;IAC/B,OAAO,CAAC,SAAS,CAAS;IAC1B,OAAO,CAAC,UAAU,CAAS;IAI3B,iBAAiB,IAAI,IAAI;IAuBzB,oBAAoB,IAAI,IAAI;IAS5B,YAAY,IAAI,IAAI;IAyEpB,MAAM,IAAI,cAAc;CA2DlC"}