@getflip/swirl-components 0.183.0 → 0.184.0
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/components.json +1 -1
- package/dist/cjs/swirl-shell-navigation-item.cjs.entry.js +1 -1
- package/dist/collection/assets/pdfjs/pdf.worker.min.js +1 -1
- package/dist/collection/components/swirl-shell-layout/swirl-shell-layout.stories.js +5 -0
- package/dist/collection/components/swirl-shell-navigation-item/swirl-shell-navigation-item.css +4 -1
- package/dist/collection/components/swirl-shell-navigation-item/swirl-shell-navigation-item.stories.js +1 -1
- package/dist/components/assets/pdfjs/pdf.worker.min.js +1 -1
- package/dist/components/swirl-shell-navigation-item.js +1 -1
- package/dist/esm/swirl-shell-navigation-item.entry.js +1 -1
- package/dist/swirl-components/{p-93bee0ae.entry.js → p-efcf7262.entry.js} +1 -1
- package/dist/swirl-components/swirl-components.esm.js +1 -1
- package/package.json +1 -1
package/components.json
CHANGED
|
@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
5
5
|
const index = require('./index-1de6abbd.js');
|
|
6
6
|
const index$1 = require('./index-2ddd0598.js');
|
|
7
7
|
|
|
8
|
-
const swirlShellNavigationItemCss = "/**\n* seems the container query does not work as expected\n*/\n\n:host {\n display: inline-flex;\n width: 100%;\n}\n\n:host * {\n box-sizing: border-box;\n }\n\n.shell-navigation-item {\n position: relative;\n display: flex;\n width: 100%;\n height: 3rem;\n padding: var(--s-space-8);\n flex-shrink: 0;\n justify-content: flex-start;\n align-items: center;\n border: none;\n border-radius: var(--s-border-radius-sm);\n color: var(--s-text-default);\n background-color: var(--s-surface-overlay-default);\n font: inherit;\n font-size: var(--s-font-size-sm);\n font-weight: var(--s-font-weight-medium);\n line-height: var(--s-line-height-sm);\n text-decoration: none;\n cursor: pointer;\n container-type: size;\n gap: var(--s-space-12);\n}\n\n.shell-navigation-item:hover {\n background-color: var(--s-surface-sunken-hovered);\n }\n\n.shell-navigation-item:hover .shell-navigation-item__badge {\n --swirl-badge-border-color: var(--s-surface-sunken-hovered);\n }\n\n.shell-navigation-item:active {\n background-color: var(--s-surface-sunken-pressed);\n }\n\n.shell-navigation-item:active .shell-navigation-item__badge {\n --swirl-badge-border-color: var(--s-surface-sunken-pressed);\n }\n\n.shell-navigation-item:focus {\n outline: none;\n }\n\n.shell-navigation-item:focus-visible {\n z-index: 1;\n box-shadow: 0 0 0 0.125rem var(--s-focus-default);\n }\n\n.shell-navigation-item.shell-navigation-item--boxed .shell-navigation-item__icon {\n background-color: var(--s-background-default);\n border-color: var(--s-border-default);\n border-radius: var(--s-border-radius-sm);\n border-width: var(--s-border-width-default);\n border-style: solid;\n }\n\n.shell-navigation-item.shell-navigation-item--boxed {\n\n --swirl-app-icon-size:
|
|
8
|
+
const swirlShellNavigationItemCss = "/**\n* seems the container query does not work as expected\n*/\n\n:host {\n display: inline-flex;\n width: 100%;\n}\n\n:host * {\n box-sizing: border-box;\n }\n\n.shell-navigation-item {\n position: relative;\n display: flex;\n width: 100%;\n height: 3rem;\n padding: var(--s-space-8);\n flex-shrink: 0;\n justify-content: flex-start;\n align-items: center;\n border: none;\n border-radius: var(--s-border-radius-sm);\n color: var(--s-text-default);\n background-color: var(--s-surface-overlay-default);\n font: inherit;\n font-size: var(--s-font-size-sm);\n font-weight: var(--s-font-weight-medium);\n line-height: var(--s-line-height-sm);\n text-decoration: none;\n cursor: pointer;\n container-type: size;\n gap: var(--s-space-12);\n}\n\n.shell-navigation-item:hover {\n background-color: var(--s-surface-sunken-hovered);\n }\n\n.shell-navigation-item:hover .shell-navigation-item__badge {\n --swirl-badge-border-color: var(--s-surface-sunken-hovered);\n }\n\n.shell-navigation-item:active {\n background-color: var(--s-surface-sunken-pressed);\n }\n\n.shell-navigation-item:active .shell-navigation-item__badge {\n --swirl-badge-border-color: var(--s-surface-sunken-pressed);\n }\n\n.shell-navigation-item:focus {\n outline: none;\n }\n\n.shell-navigation-item:focus-visible {\n z-index: 1;\n box-shadow: 0 0 0 0.125rem var(--s-focus-default);\n }\n\n.shell-navigation-item.shell-navigation-item--boxed .shell-navigation-item__icon {\n background-color: var(--s-background-default);\n border-color: var(--s-border-default);\n border-radius: var(--s-border-radius-sm);\n border-width: var(--s-border-width-default);\n border-style: solid;\n overflow: hidden;\n }\n\n.shell-navigation-item.shell-navigation-item--boxed {\n\n --swirl-app-icon-size: 2rem;\n}\n\n.shell-navigation-item.shell-navigation-item--active {\n background-color: var(--s-surface-sunken-hovered);\n }\n\n.shell-navigation-item.shell-navigation-item--active .shell-navigation-item__badge {\n --swirl-badge-border-color: var(--s-surface-sunken-hovered);\n }\n\n.shell-navigation-item.shell-navigation-item--active:hover {\n background-color: var(--s-surface-sunken-hovered);\n }\n\n.shell-navigation-item.shell-navigation-item--active:hover .shell-navigation-item__badge {\n --swirl-badge-border-color: var(--s-surface-sunken-hovered);\n }\n\n.shell-navigation-item.shell-navigation-item--active:active {\n background-color: var(--s-surface-sunken-pressed);\n }\n\n.shell-navigation-item.shell-navigation-item--active:active .shell-navigation-item__badge {\n --swirl-badge-border-color: var(--s-surface-sunken-pressed);\n }\n\n@media (min-width: 992px) {\n\n.shell-navigation-item {\n background-color: var(--s-surface-sunken-default)\n}\n }\n\n.shell-navigation-item__icon {\n display: inline-flex;\n min-width: 2rem;\n min-height: 2rem;\n height: 2rem;\n width: 2rem;\n justify-content: center;\n align-items: center;\n}\n\n.shell-navigation-item__label {\n overflow: hidden;\n min-width: 0;\n flex-grow: 1;\n text-align: start;\n white-space: nowrap;\n text-overflow: ellipsis;\n}\n\n.shell-navigation-item__badge {\n --swirl-badge-border-color: var(--swirl-shell-background);\n}\n\n@container (max-width: 4rem) {\n .shell-navigation-item__label {\n display: none;\n }\n\n .shell-navigation-item__badge {\n position: absolute;\n top: var(--s-space-4);\n right: var(--s-space-4);\n padding: var(--s-space-2);\n }\n\n .shell-navigation-item__badge--dot {\n top: var(--s-space-8);\n right: var(--s-space-8);\n }\n}\n\n@container (min-width: 10rem) {\n .shell-navigation-item__badge--dot {\n padding-right: var(--s-space-4);\n }\n}\n";
|
|
9
9
|
|
|
10
10
|
const SwirlShellNavigationItem = class {
|
|
11
11
|
constructor(hostRef) {
|