@rolemodel/optics 2.3.1 → 2.4.0

package/dist/css/addons/fonts/phosphor_icons.css

@@ -1,14 +1,15 @@
 /*
   See all icons at: https://phosphoricons.com/
-  Current version: 2.1.1
+  See Changelog at: https://github.com/phosphor-icons/web/releases
+  Current version: 2.1.2
 */
 
-@import 'https://unpkg.com/@phosphor-icons/web@2.1.1/src/regular/style.css';
-@import 'https://unpkg.com/@phosphor-icons/web@2.1.1/src/thin/style.css';
-@import 'https://unpkg.com/@phosphor-icons/web@2.1.1/src/light/style.css';
-@import 'https://unpkg.com/@phosphor-icons/web@2.1.1/src/bold/style.css';
-@import 'https://unpkg.com/@phosphor-icons/web@2.1.1/src/fill/style.css';
-@import 'https://unpkg.com/@phosphor-icons/web@2.1.1/src/duotone/style.css';
+@import 'https://unpkg.com/@phosphor-icons/web@2.1.2/src/regular/style.css';
+@import 'https://unpkg.com/@phosphor-icons/web@2.1.2/src/thin/style.css';
+@import 'https://unpkg.com/@phosphor-icons/web@2.1.2/src/light/style.css';
+@import 'https://unpkg.com/@phosphor-icons/web@2.1.2/src/bold/style.css';
+@import 'https://unpkg.com/@phosphor-icons/web@2.1.2/src/fill/style.css';
+@import 'https://unpkg.com/@phosphor-icons/web@2.1.2/src/duotone/style.css';
 
 /* Note: the important tag is how Phosphor sets up the fonts which is why we replicate them here */
 

package/dist/css/addons/fonts/tabler_icons.css

@@ -1,6 +1,7 @@
 /*
   See all icons at: https://tabler.io/icons
-  Current version: 3.30.0
+  See Changelog at: https://tabler.io/changelog
+  Current version: 3.44.0
 */
 
 @import 'https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@3.30.0/dist/tabler-icons.min.css';

package/dist/css/components/accordion.css

@@ -43,7 +43,7 @@
   }
 
   &[open] {
-    summary .accordion__marker {
+    > summary .accordion__marker {
       rotate: 0.25turn;
     }
 

package/dist/css/components/index.css

@@ -1,26 +1,26 @@
-@import 'accordion';
-@import 'alert';
-@import 'avatar';
-@import 'badge';
-@import 'breadcrumbs';
-@import 'button';
-@import 'button_group';
-@import 'card';
-@import 'confirm-dialog';
-@import 'content-header';
-@import 'divider';
-@import 'form';
-@import 'icon';
-@import 'modal';
-@import 'navbar';
-@import 'pagination';
-@import 'segmented-control';
-@import 'sidebar';
-@import 'side_panel';
-@import 'spinner';
-@import 'switch';
-@import 'tab';
-@import 'table';
-@import 'tag';
-@import 'text_pair';
-@import 'tooltip';
+@import 'accordion.css';
+@import 'alert.css';
+@import 'avatar.css';
+@import 'badge.css';
+@import 'breadcrumbs.css';
+@import 'button.css';
+@import 'button_group.css';
+@import 'card.css';
+@import 'confirm-dialog.css';
+@import 'content-header.css';
+@import 'divider.css';
+@import 'form.css';
+@import 'icon.css';
+@import 'modal.css';
+@import 'navbar.css';
+@import 'pagination.css';
+@import 'segmented-control.css';
+@import 'sidebar.css';
+@import 'side_panel.css';
+@import 'spinner.css';
+@import 'switch.css';
+@import 'tab.css';
+@import 'table.css';
+@import 'tag.css';
+@import 'text_pair.css';
+@import 'tooltip.css';

package/dist/css/components/text_pair.css

@@ -10,7 +10,11 @@
 
   display: flex;
   flex-direction: column;
-  gap: var(--op-space-x-small);
+
+  /* zero specificity. Lets utilities override */
+  :where(&) {
+    gap: var(--op-space-x-small);
+  }
 
   &.text-pair--inline {
     flex-direction: row;

package/dist/css/core/fonts/index.css

@@ -4,5 +4,5 @@
   https://developers.google.com/fonts/docs/material_symbols#variable_font_with_google_fonts
 */
 
-@import 'text_fonts';
-@import 'icon_fonts';
+@import 'text_fonts.css';
+@import 'icon_fonts.css';

package/dist/css/core/tokens/index.css

@@ -1,2 +1,2 @@
-@import 'base_tokens';
-@import 'scale_color_tokens';
+@import 'base_tokens.css';
+@import 'scale_color_tokens.css';

package/dist/css/core/utilities.css

@@ -94,6 +94,12 @@
 }
 
 /* Gap Properties */
+.gap-none {
+  gap: 0;
+
+  --op-gap: 0;
+}
+
 .gap-xxs {
   gap: var(--op-space-2x-small);
 
@@ -424,21 +430,27 @@
 .op-stack {
   display: flex;
   flex-direction: column;
-}
+  margin-block: 0;
+  margin-inline: 0;
 
-:where(.op-stack) {
-  gap: var(--op-space-medium);
+  /* zero specificity. Lets utilities override */
+  :where(&) {
+    gap: var(--op-space-medium);
+  }
 }
 
 /* Equivalent to .flex.flex-wrap.items-center.gap-md */
 .op-cluster {
   display: flex;
   flex-wrap: wrap;
-}
+  margin-block: 0;
+  margin-inline: 0;
 
-:where(.op-cluster) {
-  align-items: center;
-  gap: var(--op-space-medium);
+  /* zero specificity. Lets utilities override */
+  :where(&) {
+    align-items: center;
+    gap: var(--op-space-medium);
+  }
 }
 
 /* Equivalent to .flex.flex-wrap.items-center.justify-between.gap-md */
@@ -446,9 +458,144 @@
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
+  margin-block: 0;
+  margin-inline: 0;
+
+  /* zero specificity. Lets utilities override */
+  :where(&) {
+    align-items: center;
+    gap: var(--op-space-medium);
+  }
 }
 
-:where(.op-split) {
-  align-items: center;
-  gap: var(--op-space-medium);
+/*
+  side by side layout with a small area and a large area
+  similar to .flex with a .flex-grow-1 within it, but with a more semantic name and wrap handling.
+
+  |[] [         ]|
+  |[         ] []| with end
+*/
+.op-flank {
+  display: flex;
+  margin-block: 0;
+  margin-inline: 0;
+
+  /* zero specificity. Lets utilities override */
+  :where(&) {
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--op-space-medium);
+  }
+
+  /* Small area */
+  &:not(.op-flank--end) > :first-child,
+  &.op-flank--end > :last-child {
+    flex-basis: auto;
+    flex-grow: 1;
+  }
+
+  /* Large area */
+  &:not(.op-flank--end) > :last-child,
+  &.op-flank--end > :first-child {
+    flex-basis: 0;
+    flex-grow: 999;
+  }
+}
+
+/* Grid Layout */
+.op-grid {
+  --_op-grid-min-column-size: var(--op-space-4x-large);
+  --_op-grid-max-column-size: 0px;
+
+  display: grid;
+  grid-template-columns: repeat(
+    auto-fit,
+    minmax(max(var(--_op-grid-min-column-size), var(--_op-grid-max-column-size)), 1fr)
+  );
+  margin-block: 0;
+  margin-inline: 0;
+
+  /* zero specificity. Lets utilities override */
+  :where(&) {
+    gap: var(--op-space-medium);
+  }
+
+  &.op-grid--2-column {
+    --_op-grid-max-column-size: calc(100% / 3);
+  }
+
+  &.op-grid--3-column {
+    --_op-grid-max-column-size: calc(100% / 4);
+  }
+
+  &.op-grid--4-column {
+    --_op-grid-max-column-size: calc(100% / 5);
+  }
+
+  &.op-grid--5-column {
+    --_op-grid-max-column-size: calc(100% / 6);
+  }
+
+  &.op-grid--6-column {
+    --_op-grid-max-column-size: calc(100% / 7);
+  }
+}
+
+/* Frame */
+@property --_op-frame-inline-size {
+  inherits: true;
+  initial-value: 100%;
+  syntax: '<length> | <percentage>';
+}
+
+.op-frame {
+  display: flex;
+  overflow: hidden;
+  border-radius: inherit;
+  aspect-ratio: 1 / 1;
+  margin-block: 0;
+  margin-inline: 0;
+  max-inline-size: var(--_op-frame-inline-size);
+
+  :where(&) {
+    align-items: center;
+    justify-content: center;
+  }
+
+  > img,
+  > video {
+    block-size: 100%;
+    inline-size: 100%;
+    object-fit: cover;
+  }
+
+  /* aspect ratio */
+
+  &.op-frame--square {
+    aspect-ratio: 1 / 1;
+  }
+
+  &.op-frame--landscape {
+    aspect-ratio: 16 / 9;
+  }
+
+  &.op-frame--portrait {
+    aspect-ratio: 9 / 16;
+  }
+
+  &.op-frame--4-3 {
+    aspect-ratio: 4 / 3;
+  }
+
+  &.op-frame--3-4 {
+    aspect-ratio: 3 / 4;
+  }
+
+  &.op-frame--3-2 {
+    aspect-ratio: 3 / 2;
+  }
+
+  &.op-frame--2-3 {
+    aspect-ratio: 2 / 3;
+  }
 }

package/dist/css/optics+feather_icons.css

@@ -2922,6 +2922,11 @@ small {
   flex-grow: 1;
 }
 /* Gap Properties */
+.gap-none {
+  gap: 0;
+
+  --op-gap: 0;
+}
 .gap-xxs {
   gap: var(--op-space-2x-small);
 
@@ -3170,28 +3175,168 @@ small {
 .op-stack {
   display: flex;
   flex-direction: column;
-}
-:where(.op-stack) {
-  gap: var(--op-space-medium);
+  margin-block: 0;
+  margin-inline: 0;
+
+  /* zero specificity. Lets utilities override */
+  :where(&) {
+    gap: var(--op-space-medium);
+  }
 }
 /* Equivalent to .flex.flex-wrap.items-center.gap-md */
 .op-cluster {
   display: flex;
   flex-wrap: wrap;
-}
-:where(.op-cluster) {
-  align-items: center;
-  gap: var(--op-space-medium);
+  margin-block: 0;
+  margin-inline: 0;
+
+  /* zero specificity. Lets utilities override */
+  :where(&) {
+    align-items: center;
+    gap: var(--op-space-medium);
+  }
 }
 /* Equivalent to .flex.flex-wrap.items-center.justify-between.gap-md */
 .op-split {
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
+  margin-block: 0;
+  margin-inline: 0;
+
+  /* zero specificity. Lets utilities override */
+  :where(&) {
+    align-items: center;
+    gap: var(--op-space-medium);
+  }
 }
-:where(.op-split) {
-  align-items: center;
-  gap: var(--op-space-medium);
+/*
+  side by side layout with a small area and a large area
+  similar to .flex with a .flex-grow-1 within it, but with a more semantic name and wrap handling.
+
+  |[] [         ]|
+  |[         ] []| with end
+*/
+.op-flank {
+  display: flex;
+  margin-block: 0;
+  margin-inline: 0;
+
+  /* zero specificity. Lets utilities override */
+  :where(&) {
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--op-space-medium);
+  }
+
+  /* Small area */
+  &:not(.op-flank--end) > :first-child,
+  &.op-flank--end > :last-child {
+    flex-basis: auto;
+    flex-grow: 1;
+  }
+
+  /* Large area */
+  &:not(.op-flank--end) > :last-child,
+  &.op-flank--end > :first-child {
+    flex-basis: 0;
+    flex-grow: 999;
+  }
+}
+/* Grid Layout */
+.op-grid {
+  --_op-grid-min-column-size: var(--op-space-4x-large);
+  --_op-grid-max-column-size: 0px;
+
+  display: grid;
+  grid-template-columns: repeat(
+    auto-fit,
+    minmax(max(var(--_op-grid-min-column-size), var(--_op-grid-max-column-size)), 1fr)
+  );
+  margin-block: 0;
+  margin-inline: 0;
+
+  /* zero specificity. Lets utilities override */
+  :where(&) {
+    gap: var(--op-space-medium);
+  }
+
+  &.op-grid--2-column {
+    --_op-grid-max-column-size: calc(100% / 3);
+  }
+
+  &.op-grid--3-column {
+    --_op-grid-max-column-size: calc(100% / 4);
+  }
+
+  &.op-grid--4-column {
+    --_op-grid-max-column-size: calc(100% / 5);
+  }
+
+  &.op-grid--5-column {
+    --_op-grid-max-column-size: calc(100% / 6);
+  }
+
+  &.op-grid--6-column {
+    --_op-grid-max-column-size: calc(100% / 7);
+  }
+}
+/* Frame */
+@property --_op-frame-inline-size {
+  inherits: true;
+  initial-value: 100%;
+  syntax: '<length> | <percentage>';
+}
+.op-frame {
+  display: flex;
+  overflow: hidden;
+  border-radius: inherit;
+  aspect-ratio: 1 / 1;
+  margin-block: 0;
+  margin-inline: 0;
+  max-inline-size: var(--_op-frame-inline-size);
+
+  :where(&) {
+    align-items: center;
+    justify-content: center;
+  }
+
+  > img,
+  > video {
+    block-size: 100%;
+    inline-size: 100%;
+    object-fit: cover;
+  }
+
+  /* aspect ratio */
+
+  &.op-frame--square {
+    aspect-ratio: 1 / 1;
+  }
+
+  &.op-frame--landscape {
+    aspect-ratio: 16 / 9;
+  }
+
+  &.op-frame--portrait {
+    aspect-ratio: 9 / 16;
+  }
+
+  &.op-frame--4-3 {
+    aspect-ratio: 4 / 3;
+  }
+
+  &.op-frame--3-4 {
+    aspect-ratio: 3 / 4;
+  }
+
+  &.op-frame--3-2 {
+    aspect-ratio: 3 / 2;
+  }
+
+  &.op-frame--2-3 {
+    aspect-ratio: 2 / 3;
+  }
 }
 /* Components */
 .accordion {
@@ -3239,7 +3384,7 @@ small {
   }
 
   &[open] {
-    summary .accordion__marker {
+    > summary .accordion__marker {
       rotate: 0.25turn;
     }
 
@@ -5789,7 +5934,11 @@ dialog.modal {
 
   display: flex;
   flex-direction: column;
-  gap: var(--op-space-x-small);
+
+  /* zero specificity. Lets utilities override */
+  :where(&) {
+    gap: var(--op-space-x-small);
+  }
 
   &.text-pair--inline {
     flex-direction: row;