@lostgradient/cinder 0.2.0 → 0.4.0

package/dist/components/permission-matrix/index.js

@@ -0,0 +1,474 @@
+var __defProp = Object.defineProperty;
+var __returnValue = (v) => v;
+function __exportSetter(name, newValue) {
+  this[name] = __returnValue.bind(null, newValue);
+}
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, {
+      get: all[name],
+      enumerable: true,
+      configurable: true,
+      set: __exportSetter.bind(all, name)
+    });
+};
+var __esm = (fn, res) => () => (fn && (res = fn(fn = 0)), res);
+var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
+  get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
+}) : x)(function(x) {
+  if (typeof require !== "undefined")
+    return require.apply(this, arguments);
+  throw Error('Dynamic require of "' + x + '" is not supported');
+});
+
+// src/components/permission-matrix/index.ts
+import"@lostgradient/cinder/permission-matrix/styles";
+
+// src/components/permission-matrix/permission-matrix.svelte
+import"svelte/internal/disclose-version";
+import * as $5 from "svelte/internal/client";
+
+// ../../node_modules/lucide-svelte/dist/icons/check.svelte
+import"svelte/internal/disclose-version";
+import"svelte/internal/flags/legacy";
+import * as $2 from "svelte/internal/client";
+
+// ../../node_modules/lucide-svelte/dist/Icon.svelte
+import"svelte/internal/disclose-version";
+import"svelte/internal/flags/legacy";
+import * as $ from "svelte/internal/client";
+
+// ../../node_modules/lucide-svelte/dist/defaultAttributes.js
+var defaultAttributes = {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: 24,
+  height: 24,
+  viewBox: "0 0 24 24",
+  fill: "none",
+  stroke: "currentColor",
+  "stroke-width": 2,
+  "stroke-linecap": "round",
+  "stroke-linejoin": "round"
+};
+var defaultAttributes_default = defaultAttributes;
+
+// ../../node_modules/lucide-svelte/dist/Icon.svelte
+var root = $.from_svg(`<svg><!><!></svg>`);
+function Icon($$anchor, $$props) {
+  const $$sanitized_props = $.legacy_rest_props($$props, ["children", "$$slots", "$$events", "$$legacy"]);
+  const $$restProps = $.legacy_rest_props($$sanitized_props, [
+    "name",
+    "color",
+    "size",
+    "strokeWidth",
+    "absoluteStrokeWidth",
+    "iconNode"
+  ]);
+  $.push($$props, false);
+  let name = $.prop($$props, "name", 8, undefined);
+  let color = $.prop($$props, "color", 8, "currentColor");
+  let size = $.prop($$props, "size", 8, 24);
+  let strokeWidth = $.prop($$props, "strokeWidth", 8, 2);
+  let absoluteStrokeWidth = $.prop($$props, "absoluteStrokeWidth", 8, false);
+  let iconNode = $.prop($$props, "iconNode", 24, () => []);
+  const mergeClasses = (...classes) => classes.filter((className, index2, array) => {
+    return Boolean(className) && array.indexOf(className) === index2;
+  }).join(" ");
+  $.init();
+  var svg = root();
+  $.attribute_effect(svg, ($0, $1) => ({
+    ...defaultAttributes_default,
+    ...$$restProps,
+    width: size(),
+    height: size(),
+    stroke: color(),
+    "stroke-width": $0,
+    class: $1
+  }), [
+    () => ($.deep_read_state(absoluteStrokeWidth()), $.deep_read_state(strokeWidth()), $.deep_read_state(size()), $.untrack(() => absoluteStrokeWidth() ? Number(strokeWidth()) * 24 / Number(size()) : strokeWidth())),
+    () => ($.deep_read_state(name()), $.deep_read_state($$sanitized_props), $.untrack(() => mergeClasses("lucide-icon", "lucide", name() ? `lucide-${name()}` : "", $$sanitized_props.class)))
+  ]);
+  var node = $.child(svg);
+  $.each(node, 1, iconNode, $.index, ($$anchor2, $$item) => {
+    var $$array = $.derived(() => $.to_array($.get($$item), 2));
+    let tag = () => $.get($$array)[0];
+    let attrs = () => $.get($$array)[1];
+    var fragment = $.comment();
+    var node_1 = $.first_child(fragment);
+    $.element(node_1, tag, true, ($$element, $$anchor3) => {
+      $.attribute_effect($$element, () => ({ ...attrs() }));
+    });
+    $.append($$anchor2, fragment);
+  });
+  var node_2 = $.sibling(node);
+  $.slot(node_2, $$props, "default", {}, null);
+  $.reset(svg);
+  $.append($$anchor, svg);
+  $.pop();
+}
+
+// ../../node_modules/lucide-svelte/dist/icons/check.svelte
+function Check($$anchor, $$props) {
+  const $$sanitized_props = $2.legacy_rest_props($$props, ["children", "$$slots", "$$events", "$$legacy"]);
+  const iconNode = [["path", { d: "M20 6 9 17l-5-5" }]];
+  Icon($$anchor, $2.spread_props({ name: "check" }, () => $$sanitized_props, {
+    get iconNode() {
+      return iconNode;
+    },
+    children: ($$anchor2, $$slotProps) => {
+      var fragment_1 = $2.comment();
+      var node = $2.first_child(fragment_1);
+      $2.slot(node, $$props, "default", {}, null);
+      $2.append($$anchor2, fragment_1);
+    },
+    $$slots: { default: true }
+  }));
+}
+// ../../node_modules/lucide-svelte/dist/icons/lock-keyhole.svelte
+import"svelte/internal/disclose-version";
+import"svelte/internal/flags/legacy";
+import * as $3 from "svelte/internal/client";
+function Lock_keyhole($$anchor, $$props) {
+  const $$sanitized_props = $3.legacy_rest_props($$props, ["children", "$$slots", "$$events", "$$legacy"]);
+  const iconNode = [
+    ["circle", { cx: "12", cy: "16", r: "1" }],
+    [
+      "rect",
+      {
+        x: "3",
+        y: "10",
+        width: "18",
+        height: "12",
+        rx: "2"
+      }
+    ],
+    ["path", { d: "M7 10V7a5 5 0 0 1 10 0v3" }]
+  ];
+  Icon($$anchor, $3.spread_props({ name: "lock-keyhole" }, () => $$sanitized_props, {
+    get iconNode() {
+      return iconNode;
+    },
+    children: ($$anchor2, $$slotProps) => {
+      var fragment_1 = $3.comment();
+      var node = $3.first_child(fragment_1);
+      $3.slot(node, $$props, "default", {}, null);
+      $3.append($$anchor2, fragment_1);
+    },
+    $$slots: { default: true }
+  }));
+}
+// ../../node_modules/lucide-svelte/dist/icons/minus.svelte
+import"svelte/internal/disclose-version";
+import"svelte/internal/flags/legacy";
+import * as $4 from "svelte/internal/client";
+function Minus($$anchor, $$props) {
+  const $$sanitized_props = $4.legacy_rest_props($$props, ["children", "$$slots", "$$events", "$$legacy"]);
+  const iconNode = [["path", { d: "M5 12h14" }]];
+  Icon($$anchor, $4.spread_props({ name: "minus" }, () => $$sanitized_props, {
+    get iconNode() {
+      return iconNode;
+    },
+    children: ($$anchor2, $$slotProps) => {
+      var fragment_1 = $4.comment();
+      var node = $4.first_child(fragment_1);
+      $4.slot(node, $$props, "default", {}, null);
+      $4.append($$anchor2, fragment_1);
+    },
+    $$slots: { default: true }
+  }));
+}
+// src/utilities/class-names.ts
+function classNames(...parts) {
+  return parts.filter((part) => typeof part === "string" && part.length > 0).join(" ");
+}
+
+// src/components/permission-matrix/permission-matrix.svelte
+var root_1 = $5.from_html(`<p class="cinder-permission-matrix__description"> </p>`);
+var root_2 = $5.from_html(`<div class="cinder-permission-matrix__state"><!></div>`);
+var root_5 = $5.from_html(`<div class="cinder-permission-matrix__state"><!></div>`);
+var root_9 = $5.from_html(`<th class="cinder-permission-matrix__column-header" scope="col"> </th>`);
+var root_12 = $5.from_html(`<button type="button" class="cinder-permission-matrix__cell-control"><span class="cinder-permission-matrix__cell-token" aria-hidden="true"><!></span> <span class="cinder-permission-matrix__cell-label"> </span></button>`);
+var root_16 = $5.from_html(`<span class="cinder-permission-matrix__cell-control"><span class="cinder-permission-matrix__cell-token" aria-hidden="true"><!></span> <span class="cinder-permission-matrix__cell-label"> </span></span>`);
+var root_11 = $5.from_html(`<td class="cinder-permission-matrix__cell"><!></td>`);
+var root_10 = $5.from_html(`<tr><th class="cinder-permission-matrix__row-header" scope="row"> </th><!></tr>`);
+var root_8 = $5.from_html(`<div class="cinder-permission-matrix__scroll" data-cinder-scroll-container=""><table class="cinder-permission-matrix__table"><caption class="cinder-sr-only"> </caption><thead><tr><th class="cinder-permission-matrix__corner" scope="col"> </th><!></tr></thead><tbody></tbody></table></div>`);
+var root2 = $5.from_html(`<figure><figcaption class="cinder-permission-matrix__caption"> </figcaption> <!> <div class="cinder-permission-matrix__viewport"><!></div></figure>`);
+function Permission_matrix($$anchor, $$props) {
+  const generatedId = $5.props_id();
+  $5.push($$props, true);
+  let rowHeaderLabel = $5.prop($$props, "rowHeaderLabel", 3, "Scope"), loading = $5.prop($$props, "loading", 3, false), rest = $5.rest_props($$props, [
+    "$$slots",
+    "$$events",
+    "$$legacy",
+    "label",
+    "description",
+    "rows",
+    "columns",
+    "getCellState",
+    "onCellClick",
+    "stateLabels",
+    "rowHeaderLabel",
+    "loading",
+    "class",
+    "empty",
+    "loadingContent",
+    "id"
+  ]);
+  const rootId = $5.derived(() => $$props.id ?? generatedId);
+  const descriptionId = $5.derived(() => $$props.description ? `${$5.get(rootId)}-description` : undefined);
+  const isEmpty = $5.derived(() => $$props.rows.length === 0 || $$props.columns.length === 0);
+  const defaultStateLabels = {
+    granted: "granted",
+    denied: "denied",
+    "not-applicable": "not applicable"
+  };
+  const mergedStateLabels = $5.derived(() => ({ ...defaultStateLabels, ...$$props.stateLabels ?? {} }));
+  function stateLabel(state) {
+    return $5.get(mergedStateLabels)[state];
+  }
+  function cellLabel(row, column, state) {
+    return `${row.label} × ${column.label}: ${stateLabel(state)}`;
+  }
+  var figure = root2();
+  $5.attribute_effect(figure, ($0) => ({
+    ...rest,
+    id: $5.get(rootId),
+    class: $0,
+    "aria-label": $$props.label,
+    "aria-describedby": $5.get(descriptionId)
+  }), [() => classNames("cinder-permission-matrix", $$props.class)]);
+  var figcaption = $5.child(figure);
+  var text2 = $5.child(figcaption, true);
+  $5.reset(figcaption);
+  var node = $5.sibling(figcaption, 2);
+  {
+    var consequent = ($$anchor2) => {
+      var p = root_1();
+      var text_1 = $5.child(p, true);
+      $5.reset(p);
+      $5.template_effect(() => {
+        $5.set_attribute(p, "id", $5.get(descriptionId));
+        $5.set_text(text_1, $$props.description);
+      });
+      $5.append($$anchor2, p);
+    };
+    $5.if(node, ($$render) => {
+      if ($$props.description)
+        $$render(consequent);
+    });
+  }
+  var div = $5.sibling(node, 2);
+  var node_1 = $5.child(div);
+  {
+    var consequent_2 = ($$anchor2) => {
+      var div_1 = root_2();
+      var node_2 = $5.child(div_1);
+      {
+        var consequent_1 = ($$anchor3) => {
+          var fragment = $5.comment();
+          var node_3 = $5.first_child(fragment);
+          $5.snippet(node_3, () => $$props.loadingContent);
+          $5.append($$anchor3, fragment);
+        };
+        var alternate = ($$anchor3) => {
+          var text_2 = $5.text("Loading matrix…");
+          $5.append($$anchor3, text_2);
+        };
+        $5.if(node_2, ($$render) => {
+          if ($$props.loadingContent)
+            $$render(consequent_1);
+          else
+            $$render(alternate, -1);
+        });
+      }
+      $5.reset(div_1);
+      $5.append($$anchor2, div_1);
+    };
+    var consequent_4 = ($$anchor2) => {
+      var div_2 = root_5();
+      var node_4 = $5.child(div_2);
+      {
+        var consequent_3 = ($$anchor3) => {
+          var fragment_1 = $5.comment();
+          var node_5 = $5.first_child(fragment_1);
+          $5.snippet(node_5, () => $$props.empty);
+          $5.append($$anchor3, fragment_1);
+        };
+        var alternate_1 = ($$anchor3) => {
+          var text_3 = $5.text("No matrix data");
+          $5.append($$anchor3, text_3);
+        };
+        $5.if(node_4, ($$render) => {
+          if ($$props.empty)
+            $$render(consequent_3);
+          else
+            $$render(alternate_1, -1);
+        });
+      }
+      $5.reset(div_2);
+      $5.append($$anchor2, div_2);
+    };
+    var alternate_5 = ($$anchor2) => {
+      var div_3 = root_8();
+      var table = $5.child(div_3);
+      var caption = $5.child(table);
+      var text_4 = $5.child(caption, true);
+      $5.reset(caption);
+      var thead = $5.sibling(caption);
+      var tr = $5.child(thead);
+      var th = $5.child(tr);
+      var text_5 = $5.child(th, true);
+      $5.reset(th);
+      var node_6 = $5.sibling(th);
+      $5.each(node_6, 17, () => $$props.columns, (column) => column.id, ($$anchor3, column) => {
+        var th_1 = root_9();
+        var text_6 = $5.child(th_1, true);
+        $5.reset(th_1);
+        $5.template_effect(() => $5.set_text(text_6, $5.get(column).label));
+        $5.append($$anchor3, th_1);
+      });
+      $5.reset(tr);
+      $5.reset(thead);
+      var tbody = $5.sibling(thead);
+      $5.each(tbody, 21, () => $$props.rows, (row) => row.id, ($$anchor3, row) => {
+        var tr_1 = root_10();
+        var th_2 = $5.child(tr_1);
+        var text_7 = $5.child(th_2, true);
+        $5.reset(th_2);
+        var node_7 = $5.sibling(th_2);
+        $5.each(node_7, 17, () => $$props.columns, (column) => column.id, ($$anchor4, column) => {
+          const state = $5.derived(() => $$props.getCellState($5.get(row), $5.get(column)));
+          const accessibleLabel = $5.derived(() => cellLabel($5.get(row), $5.get(column), $5.get(state)));
+          const visibleLabel = $5.derived(() => stateLabel($5.get(state)));
+          var td = root_11();
+          var node_8 = $5.child(td);
+          {
+            var consequent_7 = ($$anchor5) => {
+              var button = root_12();
+              var span = $5.child(button);
+              var node_9 = $5.child(span);
+              {
+                var consequent_5 = ($$anchor6) => {
+                  Check($$anchor6, { size: 16, strokeWidth: 2.25 });
+                };
+                var consequent_6 = ($$anchor6) => {
+                  Lock_keyhole($$anchor6, { size: 16, strokeWidth: 2.25 });
+                };
+                var alternate_2 = ($$anchor6) => {
+                  Minus($$anchor6, { size: 16, strokeWidth: 2.25 });
+                };
+                $5.if(node_9, ($$render) => {
+                  if ($5.get(state) === "granted")
+                    $$render(consequent_5);
+                  else if ($5.get(state) === "denied")
+                    $$render(consequent_6, 1);
+                  else
+                    $$render(alternate_2, -1);
+                });
+              }
+              $5.reset(span);
+              var span_1 = $5.sibling(span, 2);
+              var text_8 = $5.child(span_1, true);
+              $5.reset(span_1);
+              $5.reset(button);
+              $5.template_effect(() => {
+                $5.set_attribute(button, "aria-label", $5.get(accessibleLabel));
+                $5.set_attribute(button, "data-cinder-row", $5.get(row).id);
+                $5.set_attribute(button, "data-cinder-column", $5.get(column).id);
+                $5.set_attribute(button, "data-cinder-state", $5.get(state));
+                $5.set_text(text_8, $5.get(visibleLabel));
+              });
+              $5.delegated("click", button, () => $$props.onCellClick($5.get(row), $5.get(column), $5.get(state)));
+              $5.append($$anchor5, button);
+            };
+            var alternate_4 = ($$anchor5) => {
+              var span_2 = root_16();
+              var span_3 = $5.child(span_2);
+              var node_10 = $5.child(span_3);
+              {
+                var consequent_8 = ($$anchor6) => {
+                  Check($$anchor6, { size: 16, strokeWidth: 2.25 });
+                };
+                var consequent_9 = ($$anchor6) => {
+                  Lock_keyhole($$anchor6, { size: 16, strokeWidth: 2.25 });
+                };
+                var alternate_3 = ($$anchor6) => {
+                  Minus($$anchor6, { size: 16, strokeWidth: 2.25 });
+                };
+                $5.if(node_10, ($$render) => {
+                  if ($5.get(state) === "granted")
+                    $$render(consequent_8);
+                  else if ($5.get(state) === "denied")
+                    $$render(consequent_9, 1);
+                  else
+                    $$render(alternate_3, -1);
+                });
+              }
+              $5.reset(span_3);
+              var span_4 = $5.sibling(span_3, 2);
+              var text_9 = $5.child(span_4, true);
+              $5.reset(span_4);
+              $5.reset(span_2);
+              $5.template_effect(() => {
+                $5.set_attribute(span_2, "data-cinder-row", $5.get(row).id);
+                $5.set_attribute(span_2, "data-cinder-column", $5.get(column).id);
+                $5.set_attribute(span_2, "data-cinder-state", $5.get(state));
+                $5.set_text(text_9, $5.get(visibleLabel));
+              });
+              $5.append($$anchor5, span_2);
+            };
+            $5.if(node_8, ($$render) => {
+              if ($$props.onCellClick)
+                $$render(consequent_7);
+              else
+                $$render(alternate_4, -1);
+            });
+          }
+          $5.reset(td);
+          $5.template_effect(() => {
+            $5.set_attribute(td, "data-cinder-state", $5.get(state));
+            $5.set_attribute(td, "aria-label", $5.get(accessibleLabel));
+          });
+          $5.append($$anchor4, td);
+        });
+        $5.reset(tr_1);
+        $5.template_effect(() => $5.set_text(text_7, $5.get(row).label));
+        $5.append($$anchor3, tr_1);
+      });
+      $5.reset(tbody);
+      $5.reset(table);
+      $5.reset(div_3);
+      $5.template_effect(() => {
+        $5.set_text(text_4, $$props.label);
+        $5.set_text(text_5, rowHeaderLabel());
+      });
+      $5.append($$anchor2, div_3);
+    };
+    $5.if(node_1, ($$render) => {
+      if (loading())
+        $$render(consequent_2);
+      else if ($5.get(isEmpty))
+        $$render(consequent_4, 1);
+      else
+        $$render(alternate_5, -1);
+    });
+  }
+  $5.reset(div);
+  $5.reset(figure);
+  $5.template_effect(() => {
+    $5.set_text(text2, $$props.label);
+    $5.set_attribute(div, "data-cinder-loading", loading() || undefined);
+  });
+  $5.append($$anchor, figure);
+  $5.pop();
+}
+$5.delegate(["click"]);
+
+// src/components/permission-matrix/index.ts
+var permission_matrix_default = Permission_matrix;
+export {
+  permission_matrix_default as default,
+  Permission_matrix as PermissionMatrix
+};
+
+//# debugId=FCECFFAA10FB3DE264756E2164756E21

package/dist/components/permission-matrix/permission-matrix.css

@@ -0,0 +1,175 @@
+@layer cinder.tokens, cinder.foundation, cinder.components, cinder.utilities;
+@layer cinder.components {
+  .cinder-permission-matrix {
+    display: grid;
+    gap: var(--cinder-space-3);
+    color: var(--cinder-text);
+  }
+
+  .cinder-permission-matrix__caption {
+    font-weight: var(--cinder-font-medium);
+    color: var(--cinder-text);
+  }
+
+  .cinder-permission-matrix__description {
+    margin: 0;
+    color: var(--cinder-text-muted);
+    font-size: var(--cinder-text-sm);
+  }
+
+  .cinder-permission-matrix__viewport {
+    position: relative;
+    min-block-size: 8rem;
+  }
+
+  .cinder-permission-matrix__scroll {
+    inline-size: 100%;
+    max-inline-size: 100%;
+    overflow-x: auto;
+    overscroll-behavior-inline: contain;
+    -webkit-overflow-scrolling: touch;
+    border: 1px solid var(--cinder-border);
+    border-radius: var(--cinder-radius-md);
+    background: var(--cinder-surface);
+  }
+
+  .cinder-permission-matrix__table {
+    min-inline-size: max-content;
+    border-collapse: separate;
+    border-spacing: 0;
+    font-size: var(--cinder-text-sm);
+  }
+
+  .cinder-permission-matrix__corner,
+  .cinder-permission-matrix__column-header,
+  .cinder-permission-matrix__row-header {
+    background: var(--cinder-surface-inset);
+    color: var(--cinder-text-muted);
+    font-weight: var(--cinder-font-medium);
+    text-align: left;
+    border-block-end: 1px solid var(--cinder-border);
+  }
+
+  .cinder-permission-matrix__corner,
+  .cinder-permission-matrix__row-header {
+    position: sticky;
+    inset-inline-start: 0;
+    z-index: 2;
+    inline-size: 12rem;
+    max-inline-size: 16rem;
+  }
+
+  .cinder-permission-matrix__corner {
+    z-index: 4;
+  }
+
+  .cinder-permission-matrix__column-header {
+    position: sticky;
+    top: 0;
+    z-index: 3;
+    min-inline-size: 7rem;
+    max-inline-size: 10rem;
+    padding-block: var(--cinder-space-2);
+    padding-inline: var(--cinder-space-2);
+    text-align: center;
+    white-space: nowrap;
+  }
+
+  .cinder-permission-matrix__row-header {
+    padding-block: var(--cinder-space-2);
+    padding-inline: var(--cinder-space-3);
+    white-space: nowrap;
+    border-inline-end: 1px solid var(--cinder-border);
+  }
+
+  .cinder-permission-matrix__cell {
+    padding: 0;
+    border-block-end: 1px solid var(--cinder-border);
+    border-inline-end: 1px solid var(--cinder-border);
+    text-align: center;
+    background: var(--cinder-surface);
+  }
+
+  .cinder-permission-matrix__cell-control {
+    appearance: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--cinder-space-1);
+    min-inline-size: 7rem;
+    inline-size: 100%;
+    min-block-size: 2.5rem;
+    padding-block: var(--cinder-space-1-5);
+    padding-inline: var(--cinder-space-2);
+    border: 0;
+    border-radius: 0;
+    background: transparent;
+    color: var(--cinder-text);
+    font: inherit;
+  }
+
+  button.cinder-permission-matrix__cell-control {
+    cursor: pointer;
+  }
+
+  button.cinder-permission-matrix__cell-control:focus-visible {
+    outline: var(--cinder-ring-width) solid transparent;
+    box-shadow: var(--_cinder-focus-ring-shadow);
+    position: relative;
+    z-index: 1;
+  }
+
+  @media (forced-colors: active) {
+    button.cinder-permission-matrix__cell-control:focus-visible {
+      outline: var(--cinder-ring-width) solid ButtonText;
+      /* 2px is correct here: cell-control has border:0 so there is no
+         ButtonBorder to merge with at 2px. */
+      outline-offset: 2px;
+      box-shadow: none;
+    }
+  }
+
+  @media (hover: hover) {
+    button.cinder-permission-matrix__cell-control:hover {
+      background: var(--cinder-surface-hover);
+    }
+  }
+
+  .cinder-permission-matrix__cell-token {
+    display: inline-grid;
+    place-items: center;
+    inline-size: 1rem;
+    block-size: 1rem;
+    font-weight: var(--cinder-font-semibold);
+  }
+
+  .cinder-permission-matrix__cell-label {
+    font-size: var(--cinder-text-xs);
+    color: var(--cinder-text-muted);
+  }
+
+  .cinder-permission-matrix__cell[data-cinder-state='granted']
+    .cinder-permission-matrix__cell-token {
+    color: var(--cinder-success);
+  }
+
+  .cinder-permission-matrix__cell[data-cinder-state='denied']
+    .cinder-permission-matrix__cell-token {
+    color: var(--cinder-danger);
+  }
+
+  .cinder-permission-matrix__cell[data-cinder-state='not-applicable']
+    .cinder-permission-matrix__cell-token {
+    color: var(--cinder-text-muted);
+  }
+
+  .cinder-permission-matrix__state {
+    display: grid;
+    min-block-size: 8rem;
+    place-items: center;
+    color: var(--cinder-text-muted);
+    background: var(--cinder-surface-inset);
+    border: 1px solid var(--cinder-border);
+    border-radius: var(--cinder-radius-md);
+  }
+}

package/dist/components/permission-matrix/permission-matrix.schema.d.ts

@@ -0,0 +1,3 @@
+import type { ComponentSchema } from '../../schema-types';
+declare const _default: ComponentSchema;
+export default _default;